是一个CMS系统， 会有很多层栏目，我要根据现有第一层 动态生成select 即第二层栏目，第二个select bind("change", 生成select函数) 这样循环, 直到没有下级栏目为止
<select id="ddl1" name="ddl1">
</select> $("#ddl1").change(function () {
var columnId = $("#ddl1 option:selected").val();
var json = GetData(columnId);
json = strToObj(json); if (typeof (json) == "number") { }
else {
var sel = $("<select><option value='-1'>请选择</option></select>");
$.each(json, function (i, o) {
sel.append("<option value=" + o.Id + ">" + o.Name + "</option>");
});
$("#divSel").append(sel);
sel.bind("change", function () {
//绑定函数继续生成下拉框
});
}
});如何循环，没有思路了
<select id="ddl1" name="ddl1">
</select> $("#ddl1").change(function () {
var columnId = $("#ddl1 option:selected").val();
var json = GetData(columnId);
json = strToObj(json); if (typeof (json) == "number") { }
else {
var sel = $("<select><option value='-1'>请选择</option></select>");
$.each(json, function (i, o) {
sel.append("<option value=" + o.Id + ">" + o.Name + "</option>");
});
$("#divSel").append(sel);
sel.bind("change", function () {
//绑定函数继续生成下拉框
});
}
});如何循环，没有思路了
$("#ddl1").change(function () {
var columnId = $("#ddl1 option:selected").val();
var json = GetData(columnId);
json = strToObj(json);
if (typeof (json) == "number") {
}
else {
//这里你最好加个识别是那个层的 ，同一层次的不要重建
var sel = $("<select id=""><option value='-1'>请选择</option></select>");
$.each(json, function (i, o) {
sel[0].options.add( new Option( o.Name, o.Id) );
});
$("#divSel").append(sel);
sel.bind("change", function () {
//绑定函数继续生成下拉框
});
}
});
function addSel(columnId){
var json = GetData(columnId);
json = strToObj(json);
if (typeof (json) == "number") {
return;
}
else {
var sel = $("<select><option value='-1'>请选择</option></select>");
$.each(json, function (i, o) {
var opn = $("<option value=" + o.Id + ">" + o.Name + "</option>");
sel.append(opn);
});
$("#divSel").append(sel);
sel.bind("change", function () {
var opn = $(this).find('option:selected');
var childId= opn.val();
if(!childId) return;
addSel(childId);
});
}}$("#ddl1").change(function(){
var columnId = $("#ddl1 option:selected").val();
addSel(columnId);
});
$("#ddl1").change(callback);
function callback() {
//获取选中的值
var columnId = $(this).val();
var json = GetData(columnId);
json = strToObj(json);
if (typeof (json) == "number") {
}
else {
var sel = $("<select><option value='-1'>请选择</option></select>");
$.each(json, function (i, o) {
sel.append("<option value=" + o.Id + ">" + o.Name + "</option>");
});
$("#divSel").append(sel);
sel.change(callback);
}
}
code=javascript]
$("#ddl1").change(function () { var columnId = $("#ddl1 option:selected").val(); var json = GetData(columnId); json = strToObj(json); if (typeof (json) == "number") { } else { var sel = $("<select><option value='-1'>请选择</option></select>"); $.each(json, function (i, o) { sel.append("<option value=" + o.Id + ">" + o.Name + "</option>"); }); $("#divSel").append(sel); sel.bind("change", function () { //绑定函数继续生成下拉框 }); } }); [/code]动态创建select前没清空
包括 取值：
取层级值，取最后选项的值
设定值 ：
层级设置，设置唯一的值（自动寻找）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.fn.extend({
TreeSelect: function (Properties) {
var Settings = {
DataSource: [
{ name: "group1", code: "group1", data: [{ name: "city1_1", code: "city1_1" }, { name: "city1_2", code: "city1_2" }, { name: "city1_3", code: "city1_3"}] }
, { name: "group2", code: "group2", data: [{ name: "city2_1", code: "city2_1" }, { name: "city2_2", code: "city2_2", data: [{ name: "city2_2_1", code: "city2_2_1" }, { name: "city2_2_2", code: "city2_2_2" }, { name: "city2_2_3", code: "city2_2_3"}] }, { name: "city2_3", code: "city2_3"}] }
, { name: "group3", code: "group3", data: [{ name: "city3_1", code: "city3_1" }, { name: "city3_2", code: "city3_2" }, { name: "city3_3", code: "city3_3"}] }
] //树形Json对象
, TextFieldName: "name" //对象中显示在Text中的属性名称
, ValueFieldName: "code" //对象中显示在Value中的属性名称
, ChildFieldName: "data" //对象中表示自己菜单的属性名称
, FirstText: null //选择控件中是否加载一个指定的空项 比如说（全部）
};
$.extend(Settings, Properties); var SelectorJQ = $(this);
SelectorJQ.each(function () {
var ControlData = $(this).data("ControlData");
if (ControlData == undefined) {
var ControlData = {
ControlJQs: {}
, Settings: Settings
};
ControlData.ControlJQs.TreeSelectJS = this;
ControlData.ControlJQs.TreeSelectJQ = $(ControlData.ControlJQs.TreeSelectJS).data("ControlData", ControlData).data("EntityList", ControlData.Settings.DataSource); var ChangeFunction = function (e) {
var thisJQ = $(e.currentTarget);
var EntityList;
if (thisJQ[0] == ControlData.ControlJQs.TreeSelectJQ[0]) {
ControlData.ControlJQs.TreeSelectJQ.empty();
EntityList = thisJQ.data("EntityList");
} else {
thisJQ.nextAll().remove();
var optionJQ = $("option:selected", thisJQ);
var Entity = optionJQ.data("Entity");
if (Entity != undefined) {
EntityList = Entity[ControlData.Settings.ChildFieldName];
};
}; if (EntityList != undefined && EntityList.length > 0) {
var SelectJQ = $("<select></select>").appendTo(ControlData.ControlJQs.TreeSelectJQ).bind("change", ChangeFunction);
if (ControlData.Settings.FirstText != null) {
$("<option value=\"\">" + ControlData.Settings.FirstText + "</option>").appendTo(SelectJQ);
};
for (var j = 0; j < EntityList.length; j++) {
var Entity = EntityList[j];
$("<option value=\"" + Entity[ControlData.Settings.ValueFieldName] + "\">" + Entity[ControlData.Settings.TextFieldName] + "</option>").data("Entity", Entity).appendTo(SelectJQ);
};
SelectJQ.change();
};
};
ChangeFunction({ currentTarget: ControlData.ControlJQs.TreeSelectJS });
};
});
return this;
}
, TreeSelectGetValue: function () {
var SelectorJQ = $(this);
var optionJQ = $("option:selected", SelectorJQ);
var EntityList = [];
optionJQ.each(function () {
EntityList.push($(this).data("Entity"));
});
return EntityList;
}
, TreeSelectGetLastValue: function () {
var EntityList = $(this).TreeSelectGetValue();
var Entity = null;
if (EntityList != undefined && EntityList.length > 0) {
Entity = EntityList[EntityList.length - 1];
};
return Entity;
}
, TreeSelectSetValue: function (Value) {
var SelectorJQ = $(this);
if (Object.prototype.toString.apply(Value) == "[object Array]") {
for (var i = 0; i < Value.length; i++) {
$("select:eq(" + i + ")", SelectorJQ).val(Value[i]).change();
};
} else {
var ControlData = SelectorJQ.data("ControlData");
if (ControlData != undefined) {
Value = Value.toString();
var ValueArray = [];
var IsFind = false;
var SelectValue = function (EntityList, Level) {
if (EntityList != undefined && EntityList.length > 0) {
for (var i = 0; i < EntityList.length; i++) {
var Entity = EntityList[i];
var V = Entity[ControlData.Settings.ValueFieldName];
if (!IsFind) {
ValueArray[Level] = V;
};
if (V == Value) {
IsFind = true;
ValueArray.splice(Level + 1, ValueArray.length - Level - 1);
break;
} else {
SelectValue(Entity[ControlData.Settings.ChildFieldName], (Level + 1));
};
};
};
};
SelectValue(ControlData.Settings.DataSource, 0);
SelectorJQ.TreeSelectSetValue(ValueArray);
};
};
}
}); function buttonTreeGetSelectValue_onclick() {
var EntityList = $("#divTreeSelect").TreeSelectGetValue();
var Html = "";
for (var i = 0; i < EntityList.length; i++) {
var Entity = EntityList[i];
Html += ">>" + Entity.name + "(" + Entity.code + ")";
};
$("#divTreeSelectValue").html(Html);
}; function buttonTreeSelectGetLastValue_onclick() {
var Entity = $("#divTreeSelect").TreeSelectGetLastValue();
var Html = Entity.name + "(" + Entity.code + ")";
$("#divTreeSelectValue").html(Html);
}; function buttonTreeSelectSetValue_onclick() {
var ValueArray = ["group2", "city2_2", "city2_2_2"];
$("#divTreeSelect").TreeSelectSetValue(ValueArray);
}; function buttonTreeSelectSetLastValue_onclick() {
var Value = "city2_2_2";
//Value = "group3";
$("#divTreeSelect").TreeSelectSetValue(Value);
};
$(function () {
$("#divTreeSelect").TreeSelect({
DataSource: [
{ name: "group1", code: "group1", data: [{ name: "city1_1", code: "city1_1" }, { name: "city1_2", code: "city1_2" }, { name: "city1_3", code: "city1_3"}] }
, { name: "group2", code: "group2", data: [{ name: "city2_1", code: "city2_1" }, { name: "city2_2", code: "city2_2", data: [{ name: "city2_2_1", code: "city2_2_1" }, { name: "city2_2_2", code: "city2_2_2" }, { name: "city2_2_3", code: "city2_2_3"}] }, { name: "city2_3", code: "city2_3"}] }
, { name: "group3", code: "group3", data: [{ name: "city3_1", code: "city3_1" }, { name: "city3_2", code: "city3_2" }, { name: "city3_3", code: "city3_3"}] }
] //树形Json对象
, TextFieldName: "name" //对象中显示在Text中的属性名称
, ValueFieldName: "code" //对象中显示在Value中的属性名称
, ChildFieldName: "data" //对象中表示自己菜单的属性名称
, FirstText: "--请选择--" //选择控件中是否加载一个指定的空项 比如说（全部）
}); });
</script>
</head>
<body>
<div id="divTreeSelect">
</div>
<input id="buttonTreeGetSelectValue" type="button" value="获取层级值" onclick="return buttonTreeGetSelectValue_onclick()" />
<input id="buttonTreeSelectGetLastValue" type="button" value="获取最后值" onclick="return buttonTreeSelectGetLastValue_onclick()" />
<input id="buttonTreeSelectSetValue" type="button" value="设置层级值" onclick="return buttonTreeSelectSetValue_onclick()" />
<input id="buttonTreeSelectSetLastValue" type="button" value="设置最后值" onclick="return buttonTreeSelectSetLastValue_onclick()" />
<div id="divTreeSelectValue">
</div>
</body>
</html>