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>

oops, edited the post to include the brackets - still doesn't work — Riel, Jun 01 '17 at 19:03
Yes, there are more errors. I'm looking into it. Also, check the dev console. — apires, Jun 01 '17 at 19:04
server console shows no errors, also tried including "src="jquery-2.2.3.min.js"" in the — Riel, Jun 01 '17 at 19:06
Are you sure? That's not what i'm seeing... http://i.imgur.com/5xlf1g5.png — apires, Jun 01 '17 at 19:06

score 0 · Answer 1 · answered Jun 01 '17 at 19:07

0

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>

answered Jun 01 '17 at 19:07

Sensoray

2,360
2
18
27

That's weird. When I run the code snippet here it works, but when I run it on my web app for some reason it doesn't? Still just shows the blank dropdown edit: if it's any help I'm using the adminlte boostrap template – Riel Jun 01 '17 at 19:13
I'm using the 2.1.1 Jquery library for it, if that helps? Make sure you don't have any other js code for other functions that are throwing errors. – Sensoray Jun 01 '17 at 19:19
When I run it on JSFiddle, the developer console shows Uncaught ReferenceError: $ is not defined at window.onload ((index):45) – Riel Jun 01 '17 at 19:22
It's not seeing that you have any jquery inclueded. When you run it on JSFiddle, turn on jquery. Or include the script tag that mine has. – Sensoray Jun 01 '17 at 19:24
I edited my post, when I remove the iCheck plugin (check code in post) it suddenly works? Any guesses as to why this is? – Riel Jun 01 '17 at 19:33
iCheck may be calling in another version of jquery leading to confliction. Is there any way to go around using that plugin? Does it work without the icheck function, or is the icheck src needing to be removed as well? – Sensoray Jun 01 '17 at 19:43
The icheck src needs to be removed as well. Did some googling and came upon this: https://stackoverflow.com/questions/28138043/icheck-jquery-blocks-custom-script I can't understand it - maybe you can help? Thanks so much btw – Riel Jun 01 '17 at 19:53
Np, and seems like the icheck functions are interfering with the normal js/jquery ones. Are your custom js methods in the same js file? Or are you placing them both with inline script within the same html file? Have you tried re-ordering them? It might be easier to just find an alternative to icheck. – Sensoray Jun 01 '17 at 20:08

Pawan Kumar · Answer 2 · 2017-06-09T14:38:42.840

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>

apires · Answer 3 · 2017-06-01T20:05:49.530

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>

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

3 Answers3