JQuery removes SELECT parameters based on another SELECT selected on change and on load

I use the following jQuery code to remove options from select and it works fine. But instead of only executing it when changing the selection of OUSE2, I would also like it to work when the page loads depending on the selected item. I tried using a copy of the script and changed .change to .load, and also tried using (window) .load without the desired results. Essentially, I need to execute the script when changing parameters 1 and when the page loads. Any help with this would be greatly appreciated.

<script type="text/javascript">
    $(document).ready(function() {
    //copy the second select, so we can easily reset it
    var selectClone = $('#theOptions2').clone();
    $('#theOptions1').change(function() {
        var val = parseInt($(this).val());
        //reset the second select on each change
        $('#theOptions2').html(selectClone.html())
        switch(val) {
            //if 2 is selected remove C
            case 2 : $('#theOptions2').find('option:contains(c)').remove();break;
            //if 3 is selected remove A
            case 3 : $('#theOptions2').find('option:contains(a)').remove();break;
        }
    });
});

</script>

<select id="theOptions1">
  <option value="1">1</option>
  <option value="2" selected="selected">2</option>
  <option value="3">3</option>
</select>
<br />
<select id="theOptions2">
  <option>a</option>
  <option>b</option>
  <option>c</option>
</select>
+3
source share
1 answer

$(document).ready(...:

$('#theOptions1').trigger('change');
+4

Source: https://habr.com/ru/post/1749308/


All Articles