Code for changing dropdown menu when clicked on radio button using jquery won't work?

Question

I'm new to jQuery and I'm trying to create a dynamic drop down menu where the content changes as you click on a radio button. Here is my html and javascript code:

Html code:

<div class="input-group">
                    Private Museum
                    <input type="radio" id="PublicPrivate1" name="publicPrivate" value="private museum" checked>
                    Public Museum
                    <input type="radio" id="PublicPrivate2" name="publicPrivate">

                    <select class="form-control" name="museum_type" id="museum_type">
                    </select>
                </div>

jQuery script:

<script>
                    $("input[type='radio'][name='publicPrivate']").change(function () {

                        var selected = $("input[type='radio'][name='publicPrivate']:checked").val();

                        if  (selected.equals("private museum")){
                            var opts = [
                                {name: "Please Select", val: ""},
                                {name: "School-based", val: "1"},
                                {name: "Religious Institution", val: "2"},
                                {name: "Organization", val: "3"},
                                {name: "Foundation", val: "4"}
                            ];
                            }
                        else{
                            var opts = [
                                {name: "Please Select", val: ""},
                                {name: "School-based", val: "1"},
                                {name: "Local Government Unit", val: "2"},
                                {name: "National Agency", val: "3"}
                            ];
                            }
                        $("#museum_type").empty();

                        $.each(opts, function (k, v) {

                            $("#museum_type").append("<option value='" + v.val + "'>" + v.name + "</option>");

                        });
                    });
                </script>

iCheck code (check comments for reason why I included this):

        <script src="plugins/iCheck/icheck.min.js"></script>
    <script>
        $(function () {
            $('input').iCheck({
                checkboxClass: 'icheckbox_square-blue',
                radioClass: 'iradio_square-blue',
                increaseArea: '20%' // optional
            });
        });
    </script>

Answer 1

It's not recognizing selected.equals. If you instead change it to if(selected == "private museum") it will work.

 $("input[type='radio'][name='publicPrivate']").change(function () { var selected = $("input[type='radio'][name='publicPrivate']:checked").val(); if (selected =="private museum"){ var opts = [ {name: "Please Select", val: ""}, {name: "School-based", val: "1"}, {name: "Religious Institution", val: "2"}, {name: "Organization", val: "3"}, {name: "Foundation", val: "4"} ]; } else{ var opts = [ {name: "Please Select", val: ""}, {name: "School-based", val: "1"}, {name: "Local Government Unit", val: "2"}, {name: "National Agency", val: "3"} ]; } $("#museum_type").empty(); $.each(opts, function (k, v) { $("#museum_type").append("<option value='" + v.val + "'>" + v.name + "</option>"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="input-group"> Private Museum <input type="radio" id="PublicPrivate1" name="publicPrivate" value="private museum" checked> Public Museum <input type="radio" id="PublicPrivate2" name="publicPrivate"> <select class="form-control" name="museum_type" id="museum_type"> </select> </div> 

Answer 2

The dropdown should have some inital list as you have one radio button is selected.

And equals is not a method in javascript or jquery, so use == or ===

  $("input[type='radio'][name='publicPrivate']").change(function () { debugger; var selected = $("input[type='radio'][name='publicPrivate']:checked").val(); if (selected=="private museum"){ var opts = [ {name: "Please Select", val: ""}, {name: "School-based", val: "1"}, {name: "Religious Institution", val: "2"}, {name: "Organization", val: "3"}, {name: "Foundation", val: "4"} ]; } else{ var opts = [ {name: "Please Select", val: ""}, {name: "School-based", val: "1"}, {name: "Local Government Unit", val: "2"}, {name: "National Agency", val: "3"} ]; } $("#museum_type").empty(); $.each(opts, function (k, v) { $("#museum_type").append("<option value='" + v.val + "'>" + v.name + "</option>"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="input-group"> <input type="radio" id="PublicPrivate1" name="publicPrivate" value="private museum" checked> Private Museum </input> <input type="radio" id="PublicPrivate2" name="publicPrivate"> Public Museum</input> <select class="form-control" name="museum_type" id="museum_type"> <option value="0">Please Select</option> <option value="1">School-based</option> <option value="2">Religious Institution</option> <option value="3">Organization</option> <option value="4">Foundation</option> </select> </div> 

Answer 3

Your code can be simplified in many ways.

I have made an example and added comments to the code below so you understand what was done / can be changed.

 //this function is called on page load (shorthand to $(document).ready(function(){}); $(function() { //defined an object to store both "private" and "public" options var $opts = { private: [{ name: "Please Select", val: "" }, { name: "School-based", val: "1" }, { name: "Religious Institution", val: "2" }, { name: "Organization", val: "3" }, { name: "Foundation", val: "4" }], public: [{ name: "Please Select", val: "" }, { name: "School-based", val: "1" }, { name: "Local Government Unit", val: "2" }, { name: "National Agency", val: "3" }] } //calling this function to populate your select on page load fillSelect(); $('.option').change(function() { //added a common class to both radios and resumed the event to a function call fillSelect(); }); //function that gets the current selected radio and calls another function sending the respective object to fill function fillSelect() { var selected = $('.option:checked').val(); if (selected == 'private museum') { appendOptions($opts.private); } else { appendOptions($opts.public); } } //function that populates the select according to the received object as parameter function appendOptions(options) { $("#museum_type").empty(); $.each(options, function(k, v) { $("#museum_type").append("<option value='" + v.val + "'>" + v.name + "</option>"); }); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="input-group"> Private Museum <input type="radio" id="PublicPrivate1" class="option" name="publicPrivate" value="private museum" checked> Public Museum <input type="radio" id="PublicPrivate2" class="option" name="publicPrivate"> <select class="form-control" name="museum_type" id="museum_type"> </select> </div>