Question

我的HTML页面内容有两个选择选项，如下所示。

它有两个li选择为#age1和#age2，内容为18到30岁。我想让用户选择从#age1开始的年龄，#age2最小值设置为相同的值（不仅实用，甚至在select的显示中）。这意味着用户无法看到低于#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/：）

当其他选择更改时，如何更改选择标记值？

3 个答案: