CODEWITHSUNDEEP
javascriptjqueryhtml
noclist
noclist

Reputation: 1819

Adding/Removing select list options in IE

I have 2 select lists, the selected item in the first controls whats displayed in the second. The condition list initially loads all available options, then filters down depending on what is selected in the category list.

My issue is that if I filter more than once, my initial conditions variable is reduced each time the categories select option is changed and I end up with incomplete data in the conditions list.

For example, I filter by category 1 to see all conditions belonging to category 1 in my condition list. If I then filter by category 2, it assigns only the current three category 1 conditions to the conditions variable before filtering and I end up with no conditions as a result.

How do I filter by the full initial list of conditions each time the category is changed?

 $(document).on('change', '#category', function (e) {
    
        var categories = $("#category option"); 
        var conditions = $("#condition option"); 

        var $selectedIndex = $(this).find('option:selected').data('position');

        $("#condition").empty();
        conditions.each(function (index, value) {
            $value = $(value);
            if ($value.hasClass('cat-' + $selectedIndex)) {
                $("#condition").append($value); 
            }
        });
    
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="category">
  <option class="cat-1">Category 1</option>
  <option class="cat-2">Category 2</option>
  <option class="cat-3">Category 3 </option>
</select>

<select id="condition">
  <option class="cat-1">Category 1-A</option>
  <option class="cat-1">Category 1-B</option>
  <option class="cat-1">Category 1-C</option>
  <option class="cat-2">Category 2-A</option>
  <option class="cat-2">Category 2-B</option>
  <option class="cat-2">Category 2-C</option>
  <option class="cat-3">Category 3-A</option>
  <option class="cat-3">Category 3-B</option>
  <option class="cat-3">Category 3-C</option>
</select>

Upvotes: 0

Views: 53

Answers (1)

Kaashan
Kaashan

Reputation: 382

I tried your code and its not working in chrome as well. Following things are wrong with your code:

a) $selectedIndex was initialized to undefined

b) You are taking the original conditions select list and making it empty, before you re-initialize it. This will lead to loss of all the initial options present in conditions select once re-initialization happens in the callback function passed to conditions.each method.

The below code will work for you:

var conditions = $("#condition option"); 
$(document).on('change', '#category', function (e) {
    $("#condition").empty();
    var selectedCategory = $(this).children("option:selected").val();
    conditions.each(function (index, value) {
        $value = $(value);
        if ($value.val().indexOf(selectedCategory) > -1) {
            $("#condition").append($value); 
        }
    });
    $("#condition").val($("#condition option:first").val());
});

Upvotes: 1

Related Questions