如何通过jQuery控制输入类型下拉菜单选择选项菜单 [英] How To Control Input Type Dropdown Select Options Menu With Jquery
问题描述
我正在创建一个网站.在此网站上,有一个表格.我以这种形式添加了3个下拉菜单,如下所示.现在,我想当有人从成人"菜单中选择5号时,我想在婴儿"菜单中显示5号.而且我也不想保留成人+儿童" =9.然后,如果该总数小于9,我想在婴儿菜单中显示该额外数字.我的意思是这样,
Adults + Children = 9
Adults = 5 and infants = 5
But , Adults + Children = 8
Adults = 5 , Children = 3 , it means there is still 1.
Now I want to show that 1 with infants , 1 + 5 = 6.
在下面的代码段中查找
$(document).ready(function() {
var adults = parseFloat($('#adults').val());
var children = parseFloat($('#children').val());
var infants = $('#infants').val();
var Total = adults + children;
//$("#errorModal").html(Total);
var totalAdultChild = 9;
$('#adults').change(function() {
var adultValue = this.value;
if (this.value > 8) {
$("#children").prop('disabled', true);
} else {
$("#children").prop('disabled', false);
$('#children option').each(function(index, element) {
if ((totalAdultChild - adultValue) < this.value)
$(this).hide();
else
$(this).show();
});
$('#infants option').each(function(index, element) {
if (adultValue < this.value)
$(this).hide();
else
$(this).show();
});
}
});
//alert(Total);
});
<form class="form-horizontal" method="POST" action="#" enctype="multipart/form-data" id="signupForm">
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Adults :
<select name="adults" class="form-control" id="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Children :
<select name="children" class="form-control" id="children">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Children :
<select name="infants" class="form-control" id="infants">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
<a href="#" id="ghsubmitbtn" class="btn btn-success">Search Flight Data</a>
</form>
没有答案??
以下是根据您的解释的解决方案:
$('#children').change(function() {
var children = $('#children').val();
var infants = $('#infants').val();
var adults = $('#adults').val();
var total_pending;
if((parseInt(adults) + parseInt(children)) < totalAdultChild){
total_pending = totalAdultChild - (parseInt(adults) + parseInt(children));
new_infants = parseInt(infants) + parseInt(total_pending);
$('#infants').val(new_infants);
}
});
});
演示: https://codepen.io/creativedev/pen/aKaJxW >
I am creating a web site. In this web site , there is a form. I have added 3 dropdown menus in this form like below. Now I want to when someone selects the number 5 from Adults menu , I want to show number 5 in the infants menu. And also I want t keep Adults + Children = 9. Then if this Total is below than 9 , I want to show that extra number in the infants menu. I mean like this ,
Adults + Children = 9
Adults = 5 and infants = 5
But , Adults + Children = 8
Adults = 5 , Children = 3 , it means there is still 1.
Now I want to show that 1 with infants , 1 + 5 = 6.
look below snippet
$(document).ready(function() {
var adults = parseFloat($('#adults').val());
var children = parseFloat($('#children').val());
var infants = $('#infants').val();
var Total = adults + children;
//$("#errorModal").html(Total);
var totalAdultChild = 9;
$('#adults').change(function() {
var adultValue = this.value;
if (this.value > 8) {
$("#children").prop('disabled', true);
} else {
$("#children").prop('disabled', false);
$('#children option').each(function(index, element) {
if ((totalAdultChild - adultValue) < this.value)
$(this).hide();
else
$(this).show();
});
$('#infants option').each(function(index, element) {
if (adultValue < this.value)
$(this).hide();
else
$(this).show();
});
}
});
//alert(Total);
});
<form class="form-horizontal" method="POST" action="#" enctype="multipart/form-data" id="signupForm">
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Adults :
<select name="adults" class="form-control" id="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Children :
<select name="children" class="form-control" id="children">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
<div class="col-md-4 col-sm-12 hero-feature">
<!-- Start Of The Col Class -->
Children :
<select name="infants" class="form-control" id="infants">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select> <br>
</div>
<a href="#" id="ghsubmitbtn" class="btn btn-success">Search Flight Data</a>
</form>
No Answer ??
Here is the solution as per your explanation:
$('#children').change(function() {
var children = $('#children').val();
var infants = $('#infants').val();
var adults = $('#adults').val();
var total_pending;
if((parseInt(adults) + parseInt(children)) < totalAdultChild){
total_pending = totalAdultChild - (parseInt(adults) + parseInt(children));
new_infants = parseInt(infants) + parseInt(total_pending);
$('#infants').val(new_infants);
}
});
});
DEMO: https://codepen.io/creativedev/pen/aKaJxW
这篇关于如何通过jQuery控制输入类型下拉菜单选择选项菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!