下拉框联动jquery\js例子
具体代码如下:
$(window).load(function () {
// 父级下拉框修改时,根据其值修改子级的可见项
$("#parentSelect").change(function () {
var parentValue = $(this).val();
var subComponent = $("#subSelect");
buildSubSelectData(subComponent, parentValue);
});
});
// 初始化父下拉框数据
PageUtils.ajaxSubmit(url, "", "POST", function (result) {
var parentSelect = $("#parentSelect");
parentSelect.empty();
parentSelect.append("<option selected = \"selected\" value=''>请选择</option>");
$.each(result['data'], function (i, item) {
parentSelect.append("<option value='" + item.itemValue + "'>" + item.itemDesc + "</option>");
});
});
// 初始化子下拉框数据
PageUtils.ajaxSubmit(url, "", "POST", function (result) {
var subComponent = $("#subComponent");
subComponent.empty();
subComponent.append("<option selected = \"selected\" value=''>请选择</option>");
$.each(result['data'], function (i, item) {
// 利用parentValue进行可见项的过滤
subComponent.append("<option value='" + item.itemValue + "' parentValue='" + item.parentValue + "' >" + item.itemDesc + "</option>");
});
subComponent.attr("disabled","disabled");
});
// 根据parentValue修改subComponent的可见项
function buildSubSelectData(subComponent, parentValue){
// 把subComponent的不可见项去掉
subComponent.children("span").each(function(){
$(this).children().clone().replaceAll($(this));
});
// 父级为"请选择"时,子级不可选
if (parentValue == '') {
subComponent.attr("disabled","disabled");
}else {
subComponent.removeAttr("disabled");
}
// 将不符合条件的项设置为不可见
subComponent.children("option[parentValue!='" + parentValue + "'][value!='']").each(function(){
$(this).wrap("<span style='display:none'></span>");
});
// 更加text设置下拉框的选中项
function selectByDesc(component, desc){
var value = "";
component.children("option").each(function () {
if($(this).text() == desc){
value = $(this).val();
}
});
component.val(value);
}