1

HTML と JQuery を使用してカスタマイズ可能なドロップダウン リストを開発しています。このドロップダウン リストには、非表示の html div タグと入力テキスト要素が含まれています。ユーザーが入力要素をクリックすると、jquery コードは非表示の div タグを表示し、非表示の div タグ内に埋め込まれたリスト項目の 1 つを選択できるようにします。ユーザーが目的のアイテムを選択すると、JavaScript コードが実行され、選択したアイテムがテキスト要素に反映されます。ここにhtmlコードがあります：

<input type="text" readonly="true" class="reg-content-datacell-textfield" style="cursor:pointer;width:270px;float:left;display:inline-block" id="txtSector" name="txtSector" />
<br />
<div id="ddlSector" style="left:26px;" class="ddlist">
<ul>
    <% 
      MainDatabaseOperationsClass.DatabaseOperations databaseOperations = new MainDatabaseOperationsClass.DatabaseOperations();//db connection class
      string sqlStatement = "select * from Dbtsniper02.dbo.Sectors";//get all database sectors
      System.Data.SqlClient.SqlDataReader sqlDataReader = databaseOperations.getDataFromDBAsSQLDataReader(sqlStatement);//execute sql statement
      while (sqlDataReader.Read())
      {
     %>
     <li class="ddlListSector"><% Response.Write("(" + sqlDataReader[0].ToString() + ") " + sqlDataReader[1].ToString()); %></li>
     <%
       }
     %>
    </ul>

JavaScript コード:

$(document).click(function (event) {
if ($(event.target).parents().index($('#ddlSector')) == -1) {
            if ($('#ddlSector').is(":visible")) {
    $('#ddlSector').slideToggle();
}};
$(document).ready(function () {
$("#txtSector).click(function (e) {
            $("#ddlSector").slideToggle();
            e.stopPropagation();
            return false;
        });
$("#ddlSector").click(function (e) {
            //disallow hide the current drop down list when you click on it direcly
            e.stopPropagation();
            return false;
        });
        $(".ddlListSector").click(function (e) {
            //relect you selection of the drop down list to the parent input text field
            if ($('#ddlSector').is(":visible")) {
                document.getElementById('txtSector').value = '';
                document.getElementById('txtSector').value = $(this).html();
                $('#ddlSector').slideToggle();
            }
        });});

さて、私の質問は、上記のようなドロップダウンリストが他にある場合、上記のドロップダウンリストからのユーザーの選択に従ってアイテムデータを更新する方法です。目的のドロップダウンリストに関連付けられたテキスト要素の値に従ってSQLステートメントを変更することでそれを行うつもりですが、ユーザーがいずれかを選択した場合にdivタグコンテンツのみを更新するイベントをトリガーする方法がわかりませんドロップダウン リストの項目

どうもありがとうございました。ご協力いただきありがとうございます。

4

1 に答える 1

0

ddlListSector クリック イベント リスナー内で AJAX 呼び出しを使用したいようです。選択された値を期待し、必要な値のリストを返すサーバー ファイルを作成します (おそらく SQL コマンドを使用します)。AJAX は、フロント エンドをどの程度関与させたいかに応じて、プレーン テキスト、JSON、または完全なマークアップを返すことができます。AJAX 呼び出しの成功のコールバックで、他のドロップの内容を更新します。すでにjQueryを使用しているようですので、ドキュメントをお勧めします。

于 2012-07-14T11:29:50.163 に答える