Question

首先，html：

<input type="radio" name="selectrad" class="rad" data-min="2" />
<input type="radio" name="selectrad" class="rad" data-min="5" />

<select name="minimum" class="minimum">
  <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>
  <option value="10">10</option>
</select>

我一直尝试做的是根据点击的单选按钮上的'data-min'值，从下拉列表中追加或删除选项。因此，如果'data-min'包含5，则仅显示选项5-10。我已经尝试找到两者之间的差异，并添加或减少这种方式，没有运气。

我正在尝试避免使用for (i=0; i<min; i++)并使用{{1}}循环获取无线电值的简单方法，并替换html，因为此代码应该尽可能快速有效。

Answer 1

下面会有什么帮助吗？它是您可以根据您的条件添加的基本代码。如果data-min为2，那么从3到10的所有内容都将被隐藏，并且它为'5'，5之前的所有内容都将被隐藏

               $(document).ready(function(){
           $("input[name='selectrad']").click(function(){
               // console.log($(this).attr("data-min"));
                if($(this).attr("data-min") === '2'){
                    $(".minimum").find("option").show();
                    var min = $(".minimum").find("option:gt(1)");
                    min.hide();
                } else {
                    $(".minimum").find("option").show();
                    var max = $(".minimum").find("option:lt(4)").hide();
                    max.hide();
                }
           })
        })

根据所选的无线电添加/删除下拉列表项

1 个答案: