Question

First, the 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>

What I’ve been trying to do is append or remove options from the dropdown based on the value of ‘data-min’ on the radio button clicked. So if ‘data-min’ contains 5, only options 5-10 will show. I’ve tried finding the difference between the two and adding or subtracting that way with no luck.

I’m trying to avoid the easy way of just grabbing the radio value, looping through with for (i=0; i<min; i++) and replacing the html, as this code should be as fast and efficient as possible.

Answer 1

Would something like below help? Its a basic code to which you can add based on your conditions. If the data-min is 2, everything from 3 to 10 will be hidden, and it its ‘5’, everything before 5 would be hidden

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