jQuery在select菜单中设置特定数字
我在这个网站上工作http://offline.raileisure.com/
在右侧有一些预订选项。
上面写的是不。成人组和No.我需要将其限制为每个属性的x。
也就是说，如果选择了车站大师之家，那么它的最大入住率是8人。
因此，如果选择了5个成人，我需要儿童选择菜单只显示5-8之间的差异，如果这是有意义的。
否则有人可以预定5个孩子和5个成年人...这将超过最大8..。
与选择车厢时相同，最大占有率为4
谢谢
李
回答 4
Stack Overflow用户
发布于 2011-06-16 20:35:32
看一下jquery更改事件
http://api.jquery.com/change/
您可以使用此事件编辑其他输入，并仅使剩余的选项可用。
下面是执行您想要的操作的代码：
var max = 8;
for (var i = 0; i <= max; i++) {
$("#children, #adults").append($("<option></option>").attr("value", i).text(i));
}
$("#adults").change(function() {
var sel = $("#children").val();
$("#children").html("");
for (var i = 0; i <= max - parseInt($("#adults").val()); i++) {
$("#children").append($("<option></option>").attr("value", i).text(i));
}
$("#children").val(sel);
});
$("#children").change(function() {
var sel= $("#adults").val();
$("#adults").html("");
for (var i = 0; i <= max - parseInt($("#children").val()); i++) {
$("#adults").append($("<option></option>").attr("value", i).text(i));
}
$("#adults").val(sel);
});工作示例：http://jsfiddle.net/geertvdc/ADC3a/
Stack Overflow用户
发布于 2011-06-16 20:34:23
如果您的select中每个option的value属性列表与显示的数字相同，则可以使用jQuery获取该值：
$("#elementId option:selected").val();
当第一个列表更改时，获取选定项的值，然后循环第二个列表中的元素，删除任何会导致值大于允许的合计的元素。
更新:有关如何工作的示例，请参阅 this fiddle。
Stack Overflow用户
发布于 2011-06-16 20:59:17
$('select[name="adults"]').change(function(){
var $c = $('select[name="children"]');
$c.html(getNewSelect($(this).val()));
$('#selectchildren').html($c.val());
})
function getNewSelect(val){
var opts = [];
for(var i = 0; i < 8 - val; i ++){
opts.push('<option val="', i+1, '">', i+1, '</option>');
}
return opts.join('');
}在我自己的风格中，我可能会使用我为自己编写的一个小lib来使它更平滑。
$('select[name="adults"]').change(function(){
var $c = $('select[name="children"]');
var val = 8 - parseInt($(this).val());
$c.html(Tog().map('1..'+val,
// this would return you something like 1..4
// it means from 1 to 4, do a loop
function(val){
return Tog('option').val(val).cont(val);
}).html()
);
$('#selectchildren').html($c.val());
})https://stackoverflow.com/questions/6371777
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号