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

我正在开发一个使用HTML和JQuery的可自定义下拉列表，该下拉列表包含一个隐藏的html div标记和输入文本元素。如果用户点击输入元素，jquery代码将显示隐藏的div标签，并允许他选择隐藏在div div标签内的列表项中的一个。在用户选择他的愿望项目之后，JavaScript代码将运行并将他选择的项目反映到文本元素中。这里是html代码：更新div标签而不使用JavaScript刷新整个页面

<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标签内容，如果用户选择其中一个下拉列表中的项目

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

来源

2012-07-14 modafarhan

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

来源

2012-07-14 11:29:50

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

回答

相关问题