其他选择更改时如何更改选择标签值？

Question

我的HTML页面包含两个选择选项，如下所示。

它有两个li选择，分别为#age1和#age2 ，内容为18至30岁。 我想让用户仿佛从#age1 ， #age2最小值中选择一个年龄设置为相同值（不仅实用，甚至在选定的显示中）。 这意味着用户看不到以下#age1选定值以下的值。

例如：-如果用户从#age1选择25，则#age2选择器值从25到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-查询

$("#age1").change(function() {      

});
$("#age2").change(function() {

});

Answer 1

$("#age1").change(function() {
    var getStartVal = $(this).val();
    $("#age2").val(getStartVal).find("option").show().each(function() {
      if($(this).attr("value")<getStartVal) {
         $(this).hide();
      }
  });
});

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

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

Answer 2

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>

然后使用此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>');
    }
});

Answer 3

您可以只使用第一个年龄列表中的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);

});

您可以看到它在这里运行； https://jsfiddle.net/1qsnzyjh/ :)