我之前三级联动的代码
var data = {
'0':[],
'1': { '0': ['0', '1'], '1': ['0', '1'], '2': ['0', '1'] },
'2': { '0': ['0', '1', '2'], '1': ['0', '1', '2'], '2': ['0', '1', '2'], '3': ['0', '1', '2'], '4': ['0', '1', '2'] },
'3': { '0': ['0', '1', '2', '3'], '1': ['0', '1', '2', '3'], '2': ['0', '1', '2', '3'], '3': ['0', '1', '2', '3'], '4': ['0', '1', '2'], '5': ['0', '1'], '6': ['0'] },
'4': { '0': ['0', '1', '2', '3', '4'], '1': ['0', '1', '2', '3', '4'], '2': ['0', '1', '2', '3'], '3': ['0', '1', '2'], '4': ['0', '1'], '5': ['0'] },
'5': { '0': ['0', '1', '2', '3', '4'], '1': ['0', '1', '2', '3'], '2': ['0', '1', '2'], '3': ['0', '1'], '4': ['0'] },
'6': { '0': ['0', '1', '2', '3'], '1': ['0', '1', '2'], '2': ['0', '1'], '3': ['0'] },
'7': { '0': ['0', '1', '2'], '1': ['0', '1'], '2': ['0'] },
'8': { '0': ['0', '1'], '1': ['0'] },
'9': { '0': ['0'] },
};
var Chengren = '';
function pleaseChoose() {
return'';
}
function setChengren() {
let Crrs = Object.keys(data);
let CrrsOption = pleaseChoose();
for (var i = 0; i < Crrs.length; i++) {
CrrsOption = CrrsOption + ('<option value="' + Crrs[i] + '">' + Crrs[i] + '</option>')
}
$("#Crrs").append(CrrsOption)
};
function setErtong(val) {
let Rtrs = Object.keys(data[val]);
let RtrsOption = pleaseChoose();
for (var i = 0; i < Rtrs.length; i++) {
RtrsOption = RtrsOption + ('<option value="' + Rtrs[i] + '">' + Rtrs[i] + '</option>')
}
$("#Rtrs").append(RtrsOption)
};
function setYinger(Crrs, Rtrs) {
let Yers = data[Crrs][Rtrs];
let YersOption = pleaseChoose();
for (var i = 0; i < Yers.length; i++) {
YersOption = YersOption + ('<option value="' + Yers[i] + '">' + Yers[i] + '</option>')
}
$("#Yers").append(YersOption)
};
$("#Crrs").on("change", function () {
$("#Rtrs").empty();
$("#Yers").empty();
var val = $("option:selected", this).val();
Chengren = val;
setErtong(val)
});
$("#Rtrs").on("change", function () {
$("#Yers").empty();
var Rtrs = $("option:selected", this).val();
setYinger(Chengren, Rtrs)
});
$(function () {
setChengren();
});
一共三个人数,成人(Crrs),儿童(Rtrs),婴儿(Yers) 选完成人值时 让儿童和婴儿的值直接能自由选择?不用选完儿童值才能选婴儿值了
自由选择,就是要去掉这个 $("#Rtrs").on("change", function () { 成人的改变事件
不行呀,去掉之后,儿童和婴儿的值都选择不了了
@帅过马化腾:
$("#Crrs").on("change", function () {
$("#Rtrs").empty();
$("#Yers").empty();
var val = $("option:selected", this).val();
Chengren = val;
setErtong(val);
var Rtrs = $("option:selected", this).val();
setYinger(Chengren, Rtrs);
});
//$("#Rtrs").on("change", function () {
// $("#Yers").empty();
// var Rtrs = $("option:selected", this).val();
// setYinger(Chengren, Rtrs)
//});
@三人乐乐: 谢谢 这个问题的确解决了。但不过有个新问题了。。因为是限制人数的,三个人数的值加起来不能超过9 在我选成人人数的时候,完全释放了后面两个下拉框的值,比如成人选3,儿童选6,婴儿选3。但实际是三个人数加起来不能超过九的哇。而且出了个小bug当我成人选4的时候为什么婴儿下拉框值只能选择0,1了呢?最多应该是有4的嘛。。
@帅过马化腾:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<script>
$(function () {
//初始化
var maxLength = 10;
setChengren();
setErtong(maxLength);
setYinger(maxLength);
//加载成人票数
function setChengren() {
var CrrsOption = "";
for (var i = 0; i < maxLength; i++) {
CrrsOption = CrrsOption + ('<option value="' + i + '">成人 ' + i + ' </option>');
}
$("#Crrs").html(CrrsOption);
};
//选择成人票数
$("#Crrs").on("change", function () {
var Crrs = $('#Crrs').val();
var len = maxLength - parseInt(Crrs);
setErtong(len);//根据已选择的成人票数,决定儿童和婴儿的票数上限
setYinger(len);
});
//加载儿童票数
function setErtong(len) {
var RtrsOption = "";
for (var i = 0; i < len; i++) {
RtrsOption = RtrsOption + ('<option value="' + i + '">儿童 ' + i + ' </option>');
}
$("#Rtrs").html(RtrsOption);
};
//加载婴儿票数
function setYinger(len) {
var YersOption = "";
for (var i = 0; i < len; i++) {
YersOption = YersOption + ('<option value="' + i + '">婴儿 ' + i + ' </option>');
}
$("#Yers").html(YersOption);
};
//选择儿童票数
$("#Rtrs").on("change", function () {
var Crrs = $('#Crrs').val();
var Rtrs = $('#Rtrs').val();
var len = maxLength - parseInt(Crrs) - parseInt(Rtrs);//根据已选择的成人和儿童票数,决定婴儿票数上限
setYinger(len);
});
});
</script>
<style type="text/css">
select {
height: 25px;
width: 65px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
乘客类型
<select id="Crrs"></select>
<select id="Rtrs"></select>
<select id="Yers"></select>
</form>
</body>
</html>
@三人乐乐: 真的很感谢麻烦了 还有些小判断自己研究谢谢