[英]How to change select tag value when other select is change?
My HTML page contents two select options as follows. 我的HTML页面包含两个选择选项,如下所示。
It has two li
selection as #age1
and #age2
with contents 18 to 30 ages. 它有两个
li
选择,分别为#age1
和#age2
,内容为18至30岁。 I want to make it as if user select a age from #age1
, #age2
minimum value set to same value(not only pragmatically, even in the display on select). 我想让用户仿佛从
#age1
, #age2
最小值中选择一个年龄设置为相同值(不仅实用,甚至在选定的显示中)。 That means user cant see below values than the #age1
selected value. 这意味着用户看不到以下
#age1
选定值以下的值。
Eg:- if user select 25 from #age1
, #age2
selector values starts from 25 to 30. 例如:-如果用户从
#age1
选择25,则#age2
选择器值从25到30开始。
HTML HTML
<li>
<label class="label">Age</label>
<select id="age1">
<option value="18">18</option><option value="19">19</option>
<option value="20">20</option><option value="21">21</option>
<option value="22">22</option><option value="23">23</option>
<option value="24">24</option><option value="25">25</option>
<option value="26">26</option><option value="27">27</option>
<option value="28">28</option><option value="29">29</option>
<option value="30">30</option>
</select>
<label class="label">To</label>
<select id="age2">
<option value="18">18</option><option value="19">19</option>
<option value="20">20</option><option value="21">21</option>
<option value="22">22</option><option value="23">23</option>
<option value="24">24</option><option value="25">25</option>
<option value="26">26</option><option value="27">27</option>
<option value="28">28</option><option value="29">29</option>
<option value="30">30</option>
</select>
</li>
J-query J-查询
$("#age1").change(function() {
});
$("#age2").change(function() {
});
$("#age1").change(function() {
var getStartVal = $(this).val();
$("#age2").val(getStartVal).find("option").show().each(function() {
if($(this).attr("value")<getStartVal) {
$(this).hide();
}
});
});
You can use the above jquery to make it working. 您可以使用上面的jquery使其工作。
Working Fiddle : https://jsfiddle.net/wpam11k7/ 工作小提琴: https : //jsfiddle.net/wpam11k7/
ameenulla0007 answer is a good one but I would edit you html like this ameenulla0007答案是一个不错的选择,但我会像这样编辑html
<select id="age1">
<option value="18">18</option><option value="19">19</option>
<option value="20">20</option><option value="21">21</option>
<option value="22">22</option><option value="23">23</option>
<option value="24">24</option><option value="25">25</option>
<option value="26">26</option><option value="27">27</option>
<option value="28">28</option><option value="29">29</option>
<option value="30">30</option>
</select>
<label class="label">To</label>
<select id="age2">
</select>
</li>
Then use this jQuery to add just the selections you want rather than hiding 然后使用此jQuery仅添加您想要的选择,而不是隐藏
jQuery("#age1").change(function() {
var bottomEnd = jQuery("#age1").val();
var topEnd = jQuery("#age1").val() + 30;
for( $i=bottomEnd; $i < topEnd; $i++ {
jQuery('#age-2').append('<option value="'+jQuery('#age1').val()+'">'+jQuery('#age1').val()+'</option>');
}
});
You could just use the html from your first age list to populate the second one, since they appear to be the same: 您可以只使用第一个年龄列表中的html来填充第二个年龄列表,因为它们看起来是一样的:
$("#age1").on("change", function() {
/* get the value of age1 */
var val = $(this).val();
/* get all the ages after the selected one
and add them to the selected age */
var $selected = $(this).find("option:selected");
var $available = $selected.add( $selected.nextAll() ).clone();
/* save the selected value of age2 */
var selected2 = $("#age2").find("option:selected").val();
/* append the html from age1 selection to the
age2 list, and try to keep the old selection value */
$("#age2")
.html( $available )
.find("option[value='" + selected2 + "']")
.prop("selected", true);
});
You can see it running here; 您可以看到它在这里运行; https://jsfiddle.net/1qsnzyjh/ :)
https://jsfiddle.net/1qsnzyjh/ :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.