更新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标签内容,如果用户选择其中一个下拉列表中的项目
非常感谢你,我非常感谢您的合作
答
这听起来像你想使用的ddlListSector click事件监听器里的AJAX调用。创建一个服务器文件,该文件将期望选定的值并返回所需的值列表(可能使用sql命令)。 AJAX可以返回纯文本,JSON甚至完全标记,具体取决于您希望前端的参与程度。在AJAX调用的成功回调中,更新您拥有的其他任何下降的内容。它看起来像你已经使用jQuery,所以我建议their docs。