Question

I’m creating an MVC form, and I have multiple checkboxes and two drop down lists. I have figured out how to populate the first DDL based on what boxes are checked (i.e. empty at the beginning, checking boxes fills the items). However, I want to add another DDL that has the same items and populates in the same manner. My code looks like this:

<script type="text/javascript">
    function checkedToggle(value, checked) {
        x = document.getElementById("filter1");
        y = document.getElementById("filter2");
        if (checked == true) {
            var option = document.createElement("option");
            option.text = value;
            x.add(option, null);
            y.add(option, null);
        }
        else {
            for (i = 0; i < x.length; i++) {
                if (x.options[i].value == value) {
                    x.remove(i);
                    y.remove(i);
                }
            }
        }
    }
</script>

The else statement obviously removes an item from the list once you uncheck the box.

Now, when you click a check box, rather than adding the item to both lists, it only adds to the second one, and I’m not exactly sure why. Any advice?

Answer 1

You need to create two elements, since in your code you just move the first DOM element to the second select.

var option = document.createElement("option");
var option2 = document.createElement("option");

option.text = value;
option2.text = value;

x.add(option, null);
y.add(option2, null);