如何基于html中的另一个选择选项来操纵选择选项？

Question

I have two select tags (both are same) :

<select class="form-control" name='end'>
    <option selected disabled hidden value="">end</option>

    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
</select>

Here, if I select one option from first dropdown , then in second dropdown all option up to the selected one should not be shown. For example, If I select 5 in first dropdown then second dropdown should show only 6-11. Can anyone help me with this?

JSFIDDLE

Answer 1

You need to add an onchange event listener, and use the value of the first select to loop through the second select and hide the options.

Using jQuery:

var max = 0;
var options = $("select[name='end']").find('option');

$("select[name='start']").on('change', function() {

    options.each(function(){
        $(this).show();
    });

    max = parseInt( $(this).val() );

    for (i=0; i < max; i++) {
        $(options[i]).hide();
    }

});

Answer 2

give ids to your selects, for example: #firstSelect and #secondSelect I made this solution using jquery because it is simpler than with plain javascript. Try this:

 $("#firstSelect").change(function () {
      var selectedOption = $("select option:selected").text();
      $("#secondSelect option").each(function() {
        var txtOption = $(this).text();
        if(parseInt(txtOption) <= parseInt(selectedOption)){ 
          $(this).remove();
        }
      });
});

---

If you want this to work more than once, so that when you change the first one again the second one changes again and adds or remove the options fresh from the begining:

$("#firstSelect").change(function () {
    var selectedOption = $("select option:selected").text();
    $("#secondSelect").empty();
    for (var index = 2; index < 12; index++) {
        if(index >= parseInt(selectedOption)){
            $("#secondSelect").append(
                $('<option></option>').html(index)
            );
        }
    }
});

check the indexes in the for loop, these are hardcoded from 2 to 12. You could do that dinamically aswell. But if there are always the options 1,2,3...9,10 in the first dropdown, this should work fine.

Answer 3

You need to associate a change event listener to the select dropdown with name start so that when each option is selected from this dropdown you can show/hide the option in end dropdown like this. Also, make note of parseInt() which will compare the option value as a integer and give you the correct result.

 $('select[name="start"]').change(function(){ var selectedValue = parseInt($(this).val()); changeEndOptions(selectedValue); }); function changeEndOptions(startValue){ var $options = $('select[name="end"] option'); $options.each(function(){ var optionVal = parseInt($(this).val()); if(optionVal <= startValue){ $(this).hide(); } else { $(this).show(); } }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="form-control" name='start'> <option selected disabled hidden value="">start</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select> <select class="form-control" name='end'> <option selected disabled hidden value="">end</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> <option>11</option> </select>