Question

我正在使用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标签内容下拉列表项

非常感谢，非常感谢您的合作

Answer 1

听起来你想在ddlListSector点击事件监听器中使用AJAX调用。创建一个期望选择值的服务器文件并返回所需的值列表（可能使用sql命令）。 AJAX可以返回纯文本，JSON甚至完整标记，具体取决于您希望前端的参与程度。在AJAX调用的成功回调中，更新您拥有的其他任何内容的内容。看起来你已经在使用jQuery了，所以我推荐their docs。

更新div标签而不使用JavaScript刷新整个页面

1 个答案: