使用 jquery 控制两个选择输入的组合值
Controlling combined value of two select inputs with jquery
我有两个具有相同值的简单选择输入，在它们中，从 0% 到 50%。我想控制它们的值，以便当它们的值组合时，它们不超过 50%。因此，无论两个输入中的哪一个被更改，另一个输入都会相应地改变其值。因此，假设如果第一个输入的值为 5%，则第二个输入的值应为 45%，反之亦然。我尝试将 .change 函数与 if/else if 语句一起使用，但我就是无法让它工作。不用说，我对jquery没有太多的过期时间。
.HTML：
<select id="myselect1">
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
</select>
<select id="myselect2">
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
</select>
.JS：
$('#myselect1').change(function(){
if ($this.value == '5'){
$('#myselect2').val('45');
}
else if ($this.value == '10'){
$('#myselect2').val('40');
}
else if ($this.value == '15'){
$('#myselect2').val('35');
}
else if ($this.value == '20'){
$('#myselect2').val('30');
}
else if ($this.value == '25'){
$('#myselect2').val('25');
}
else if ($this.value == '30'){
$('#myselect2').val('20');
}
else if ($this.value == '35'){
$('#myselect2').val('15');
}
else if ($this.value == '40'){
$('#myselect2').val('10');
}
else if ($this.value == '45'){
$('#myselect2').val('5');
}
else if ($this.value == '50'){
$('#myselect2').val('0');
}
});
$('#myselect2').change(function(){
if ($this.value == '5'){
$('#myselect1').val('45');
}
else if ($this.value == '10'){
$('#myselect1').val('40');
}
else if ($this.value == '15'){
$('#myselect1').val('35');
}
else if ($this.value == '20'){
$('#myselect1').val('30');
}
else if ($this.value == '25'){
$('#myselect1').val('25');
}
else if ($this.value == '30'){
$('#myselect1').val('20');
}
else if ($this.value == '35'){
$('#myselect1').val('15');
}
else if ($this.value == '40'){
$('#myselect1').val('10');
}
else if ($this.value == '45'){
$('#myselect1').val('5');
}
else if ($this.value == '50'){
$('#myselect1').val('0');
}
});
JS小提琴
如果你改变了，你的代码将起作用
$this.value this.value或将this分配给$this(var $this = this(;
但是，这可以通过非常简单的方式完成
$('#myselect1, #myselect2').change(function() {
var who = this.id === 'myselect1' ? '#myselect2' : '#myselect1';
// if the ID of the changed select is #myselect1 who will be #myselect2 or vice versa.
$(who).val(50 - this.value); // change the value of the other select
});<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="myselect1">
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
</select>
<select id="myselect2">
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
</select>将侦听器放在两个选择框上，做一些数学运算来计算另一个值需要是什么，并检查我们需要更改哪个元素。
http://jsfiddle.net/qj459ntg/3/
$('select').change(function(){
var MaxValue = 50
var CurValue = $(this).val();
var NewValue = MaxValue - CurValue;
if ($(this).is('#myselect1')) {
$('#myselect2').val(NewValue);
} else {
$('#myselect1').val(NewValue);
}
});
您有两个问题。
您需要将所有语句更改为：
if ($(this).val() == '5'){
$('#myselect2').val('45');
}
$this 不是 jquery 中的有效选择器。.value 不能与 jQuery 选择器混合。
$("#select_1").change(function() {
var select_1_value = $("#select_1").val();
var select_2_value = $("#select_2").val();
var value_1 = parseInt(select_1_value);
var value_2 = parseInt(select_2_value);
var sum_values = value_1 + value_2;
if (sum_values > 50)
{
var select_2_needed = value_2 - ((value_1 + value_2) - 50);
$("#select_2").val(select_2_needed + "%");
}
});
$("#select_2").change(function() {
var select_1_value = $("#select_1").val();
var select_2_value = $("#select_2").val();
var value_1 = parseInt(select_1_value);
var value_2 = parseInt(select_2_value);
var sum_values = value_1 + value_2;
if (sum_values > 50)
{
var select_1_needed = value_1 - ((value_1 + value_2) - 50);
$("#select_1").val(select_1_needed + "%");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id = "select_1">
<option>0%</option>
<option>5%</option>
<option>10%</option>
<option>15%</option>
<option>20%</option>
<option>25%</option>
<option>30%</option>
<option>35%</option>
<option>40%</option>
<option>45%</option>
<option>50%</option>
</select>
<select id = "select_2">
<option>0%</option>
<option>5%</option>
<option>10%</option>
<option>15%</option>
<option>20%</option>
<option>25%</option>
<option>30%</option>
<option>35%</option>
<option>40%</option>
<option>45%</option>
<option>50%</option>
</select>您将需要这样的东西(请参阅链接的代码段(。
$('#myselect1'(.change(function(({ if($(this(.val(( <50 ({ var value= 50 - $(this(.val((; $('#myselect2'(.val(value(;}else if($(this(.val(( == 50({ $('#myselect2'(.val(0(; } }(;
$('#myselect2'(.change(function(({ if($(this(.val(( <50 ({ var value= 50 - $(this(.val((; $('#myselect1'(.val(value(;}else if($(this(.val(( == 50({ $('#myselect1'(.val(0(; } }(;
希望这对您有所帮助。
相关文章：
- HTML使用选择表单更改输入选择(可能使用JQuery?）
- jquery:输入选择器未选择:选择元素
- 使用文件输入选择多个 FIle 时删除单个文件
- 在 AngularJS 中选择输入选择不同的子 JSON 元素
- 带有 Li 的 jquery 输入选择器
- 检查表行的所有输入/选择字段是否都有值
- jQuery 输入选择 - 将中继器内的总计相加
- jQuery 手风琴如何获得输入选择按钮的活动标题.
- 输入-选择下拉菜单在firefox中不起作用
- Angular-基于单选输入选择在ng重复中切换元素类
- 将ID添加到按钮，但必须根据单选输入选择进行更改
- IE9看不到“;文件”;在文件输入选择框中
- 如何在不保存的情况下维护在Web表单上输入/选择的数据
- jQuery过滤器通过文本输入选择选项
- Javascript名称数组输入选择器(name[sometext]）
- 我需要做些什么才能让它显示所有的用户输入/选择
- AngularJS输入选择ng模型中的整数值停止工作
- Ruby on rails-使用AJAX更新输入-选择选项
- 在动态生成的HTML中使用CSS布局标签/输入/选择元素的问题
- 动态抓取输入/选择值而不直接瞄准- Javascript
