当其他选择更改时，如何更改选择标记值？ [英] How to change select tag value when other select is change?

问题描述

我的HTML页面内容有以下两个选项。

My HTML page contents two select options as follows.

它有两个 li 选择＃age1 和＃age2 内容18至30岁。
我想让它好像用户从＃age1 中选择年龄，＃age2 最小值设置相同的值（不仅是实际的，甚至在选择的显示中）。这意味着用户无法看到以下值而不是＃age1 所选值。

It has two li selection as #age1 and #age2 with contents 18 to 30 ages. 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). That means user cant see below values than the #age1 selected value.

例如： - 如果用户从中选择25 ＃age1 ，＃age2 选择器值从25到30开始。

Eg:- if user select 25 from #age1, #age2 selector values starts from 25 to 30.

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

$("#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();
      }
  });
});

您可以使用上面的jquery使其正常工作。

You can use the above jquery to make it working.

工作小提琴： https://jsfiddle.net/wpam11k7/

Working Fiddle : https://jsfiddle.net/wpam11k7/

这篇关于当其他选择更改时，如何更改选择标记值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！