1

我正在使用 HTML 和 JQuery 开发一个可自定义的下拉列表，这个下拉列表包含一个隐藏的 html div 标签和输入文本元素。如果用户单击输入元素，jquery 代码会显示隐藏的 div 标记，并允许他选择嵌入在隐藏 div 标记内的列表项之一。在用户选择他想要的项目后，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 调用的成功回调中，更新您拥有的任何其他 drop 的内容。看起来您已经在使用 jQuery，所以我推荐他们的文档。

于 2012-07-14T11:29:50.163 回答