Droplist Dymanic change value of second list - issue

Question

I have this script that changes the select options of a second drop list depending on the value of the selection of a first drop list. This is working fine to some degree. What I want to change is a 2 things:

1- If there is a space in the first value (Customer Service) it does not work, but I want there to be a space, It Says. Error: Syntax error, unrecognized expression: [id=Customer Service]

2- On initial load of the page the default value of the departments drop list is customer server, but the category drop list shows all choices until I change the Departments drop list then it display only the customer service items which is what I want on the initial load of the page.

Let me know if there is anything else needed to help solve this.

$("#Department").change(function () {
    if ($(this).data('options') === undefined) {
        $(this).data('options', $('#Catagory option').clone());
    }
    var id = $(this).val();
    var options = $(this).data('options').filter('[id=' + id + ']');
    $('#Catagory').html(options);
});

</script>

<div class="col-md-10">
    <select name="Department" id="Department">
        <option value="Customer Service">Customer Service</option>
        <option value="IT">IT</option>
        <option value="HR">HR</option>
    </select>
</div>

<div class="col-md-10">
    <select name="Catagory" id="Catagory">
        <option id ="Customer Service" value="Option1">Option1</option>
        <option id ="CustomerService" value="Option2">Option2</option>
        <option id ="CustomerService" value="Option3">Option3</option>
        <option id ="CustomerService" value="Option4">Option4</option>
        <option id ="CustomerService" value="Option5">Option5</option>
        <option id ="IT" value="IT">N/A</option>
        <option id ="HR" value="HR">N/A</option>
        <option>
    </select>
</div>

You can't use the same ID repeatedly, switch to classes, or data-attributes. — bot19, Jul 26 '19 at 14:26

score 0 · Answer 1 · answered Jul 26 '19 at 14:23

0

For the first question read this answer.
For the second part you should force the change() on page load, like so:

$(function() {
    $("#Department").change();
});

answered Jul 26 '19 at 14:23

iamdlm

1,033
1
7
20

Piyush Shukla · Answer 2 · 2019-07-26T15:40:18.103

<script>
$(document).ready(function () {
    if($('#Catagory').length>0){
        $.each($("#Catagory option"), function(){
            if($(this).attr('id')!='undefined'){
                let val = $(this).attr('id').replace(/\s/g,'');
                $(this).attr('id',val);
            }
        });
    }
    if($('#Department option:selected').val()!=''){
        if ($('#Department').data('options') === undefined) {
            $('#Department').data('options', $('#Catagory option').clone());
        }
        var id = $('#Department').val().replace(/\s/g,'');
        var options = $('#Department').data('options').filter("[id='" + id + "']");
        $('#Catagory').html(options);
    }
    $("#Department").change(function () {
        if ($(this).data('options') === undefined) {
            $(this).data('options', $('#Catagory option').clone());
        }
        var id = $(this).val().replace(/\s/g,'');
        var options = $(this).data('options').filter("[id='" + id + "']");
        $('#Catagory').html(options);
    });
});
</script>

<div class="col-md-10">
    <select name="Department" id="Department">
        <option value="Customer Service">Customer Service</option>
        <option value="IT">IT</option>
        <option value="HR">HR</option>
    </select>
</div>

<div class="col-md-10">
    <select name="Catagory" id="Catagory">
        <option id ="Customer Service" value="Option1">Option1</option>
        <option id ="Customer Service" value="Option2">Option2</option>
        <option id ="CustomerService" value="Option3">Option3</option>
        <option id ="CustomerService" value="Option4">Option4</option>
        <option id ="CustomerService" value="Option5">Option5</option>
        <option id ="IT" value="IT">N/A</option>
        <option id ="HR" value="HR">N/A</option>
    </select>
</div>

Droplist Dymanic change value of second list - issue

2 Answers2