从服务器加载带有级联下拉列表的 jQuery 对话框
Load jQuery Dialog with cascading dropdowns from server
我有一个jQuery对话框,需要打开并填充数据库中的数据。 对话框中有下拉列表,当处于"新"模式(不编辑以重新保存)级联时。
如何使用数据库中的值加载对话框,同时导致级联发生。
当对话框处于"编辑"模式时,我已经使用对话框的onfocus事件绑定,但是每次元素获得焦点时,焦点都会命中。 如果不偷偷摸摸地使用编辑模式就无法工作。
我尝试打开对话框并使用jQuery设置下拉列表,这有效,但是级联确实有效。
对于级联,我在不同的下拉列表中使用 .change。
不确定代码是否会有所帮助,但会发布一些代码来迭代我正在使用的 jQuery 功能。
问题是:如何打开对话框,使用来自服务器的信息加载下拉列表并使 .change 功能正常工作?
$('#collectDD').change(function(){
// first change the item drop down list
var collection = $('#collectDD').val();
data = "coll=" + collection + "&action=getItems&func=";
$('#addCollection').text(collection);
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
$('#itemDD').empty();
$("#itemDD").html(html);
// now update the function collection dropdown
data = "coll=" + collection + "&action=getFunction";
}
});
集合 DD HTML
<select id="collectDD" name="collectionDD">
<option>Select Collection</option>
<option>Option1</option>
</select>
这与您的标签名称不完全匹配,我对data
字符串进行了一些更改,但我认为它符合您正在寻找的内容
<div id="dialogbox">
<select id="s1"></select>
<select id="s2"></select>
<select id="s3"></select>
</div>
<script type="text/javascript">
$(document).ready( function() {
$( "#dialogbox" ).dialog({
open: function(event, ui) {
var s1 = $("#s1").empty();
var s2 = $("#s2").empty();
var s3 = $("#s3").empty();
s1[0].enabled = false;
s2[0].enabled = false;
s3[0].enabled = false;
//load first dropdown from the database
var data = "coll=dropdown1&val=&action=getItems&func=";
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
s1.html(html);
s1[0].enabled = true;
}
});
//load the second DD when the first changes
s1.change( function() {
s2[0].enabled = false; //disable until after ajax load
s3[0].enabled = false;
data = "coll=dropdown2&val=" + s1.text() + "&action=getItems&func=";
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
s2.empty().html(html);
s2[0].enabled = true;
}
});
});
s2.change( function() {
if (s2[0].enabled) { //test for enabled to prevent some unnessecary loads
s3[0].enabled = false;
data = "coll=dropdown3&val=" + s2.text() + "&action=getItems&func=";
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
s3.empty().html(html);
s3[0].enabled = true;
}
});
}
});
}
});
});
</script>
更新
下面是一个在自己的函数中使用 change 函数的示例
<div id="dialogbox">
<select id="s1"></select>
<select id="s2"></select>
<select id="s3"></select>
</div>
<script type="text/javascript">
var s1, s2, s3, data;
$(document).ready( function() {
s1 = $("#s1").empty();
s2 = $("#s2").empty();
s3 = $("#s3").empty();
$( "#dialogbox" ).dialog({
open: function(event, ui) {
s1[0].enabled = false;
s2[0].enabled = false;
s3[0].enabled = false;
//load first dropdown from the database
data = "coll=dropdown1&val=&action=getItems&func=";
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
s1.html(html);
s1[0].enabled = true;
}
});
//load the second DD when the first changes
s1.change( changeDD1 );
//load the third DD when the second changes
s2.change( changeDD2 );
}
});
});
function changeDD1() {
s2[0].enabled = false; //disable until after ajax load
s3[0].enabled = false;
data = "coll=dropdown2&val=" + s1.text() + "&action=getItems&func=";
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
s2.empty().html(html);
s2[0].enabled = true;
}
});
}
function changeDD2() {
if (s2[0].enabled) { //test for enabled to prevent some unnessecary loads
s3[0].enabled = false;
data = "coll=dropdown3&val=" + s2.text() + "&action=getItems&func=";
$.ajax({
url: "getItemList.php",
type: "GET",
cache: false,
data: data,
success: function (html) {
s3.empty().html(html);
s3[0].enabled = true;
}
});
}
}
</script>
相关文章:
- 如何使用jQuery选择下拉列表的值
- jQuery表单添加不适用于下拉列表
- 禁用jQuery中的下拉列表
- 如何使用jquery从下拉列表(javascript)中选择192.168.3.0进行测试自动化
- Jquery 读取编号组中选择下拉列表的数组
- 如何在 Javascript/jQuery 中获取一些随机下拉列表的选定值
- 使用 jQuery 从下拉列表中获取所选文本
- 通过Jquery根据下拉列表中的选择禁用数字字段
- jQuery下拉列表未显示第一个选项
- jQuery,引导程序下拉列表问题
- 当链接单击-jQuery时,第二层下拉列表将隐藏
- 使用带有jQuery或JavaScript的Play 2框架下拉列表
- 如何使用jquery将所选项目从一个下拉组列表(optgroup)移动到另一个下拉列表(optgroup)
- 如何使用JavaScript/JQuery获取下拉列表的选定值
- 如何处理多选下拉列表 - JQuery.
- 如果未选择第一项,请选择下拉列表 jQuery
- 如何修改代码以将其应用于三个下拉列表?(Jquery)
- 单个列筛选不保存下拉列表 jQuery 的状态
- 默认文本下拉列表jquery
- 将 JavaScript 数组转换为下拉列表 - jQuery