CODEWITHSUNDEEP
jqueryhtmlajaxjson
Developer
Developer

Reputation: 1437

empty / remove dependent selected 2nd dropdown using jquery ajax/ json data

i have 2 dropdowns [select boxs] 1. for Institution 2. for Course

when i select dropdown number 01. i.e., institution the second dropdown will iterate through json.

If i again select institution dropdown [blank select option] the second dropdown select options should became empty.

Demo here : [ http://jsfiddle.net/stanze/Cue8g/2/ ]

HTML : 
   <form id="basic-form-reqtranscripts">
          <div class="input-wrapper">
              <label for="institution">Institution</label>
                  <select id="country" name="">
                      <option value="">Select One</option>
                    </select>
          </div>

           <div class="input-wrapper">
               <label for="course"> Course </label>
                   <select id="state" name="">
                       <option value="">Select One</option>
                  </select>
            </div>
    </form>

JS : 
var myJson = {
    "listItems": [
        {
            "institute": "Manipal 1",
            "id": "1",
            "course": [
                {
                    "name": "BCA",
                    "id": "BCA 111",
                },

                {
                    "name": "BCA 1",
                    "id": "BCA 222",
                }
            ]
        },
        {
            "institute": "Manipal 2",
            "id": "2",
            "course": [
                {
                    "name": "MCA",
                    "id": "MCA 111",
                },

                {
                    "name": "MCA 1",
                    "id": "MCA 222",
                }
            ]
        }
    ]
}
$(function(){
  $.each(myJson.listItems, function (index, value) {
    //$("#country").find("option:gt(0)").remove();
    $("#country").append('<option value="'+value.id+'">'+value.institute+'</option>');
  });

    $('#country').on('change', function(){
      //console.log($(this).val());
      for(var i = 0; i < myJson.listItems.length; i++)
      {
        if(myJson.listItems[i].id == $(this).val())
        {
           $('#state').html('<option value="000">-Select State-</option>');
           $.each(myJson.listItems[i].course, function (index, value) {
              $("#state").append('<option value="'+value.id+'">'+value.name+'</option>');
          });
        }
      }
  });
});

Appreciate for your help !!

Thanks

Upvotes: 0

Views: 1403

Answers (2)

Wilmer
Wilmer

Reputation: 2511

$('#country').on('change', function(){
   if($(this).val()==""){
        $('#state').find("option").first().nextAll().remove();
        return;
    }
    ...

Upvotes: 0

guido
guido

Reputation: 19224

Just move the html() call resetting the select contents out of the for loop.

$('#country').on('change', function(){
    $('#state').html('<option value="000">-Select State-</option>');
    for(var i = 0; i < myJson.listItems.length; i++) { 
       // only add the options from json data
    }

http://jsfiddle.net/Cue8g/4/

Upvotes: 1

Related Questions