make drop down list in html disabled if no data is coming from json

Question

I am getting a json from web service according to which i am populating 2 drop down lists in html using jquery. The condition applied here is that the value of second drop down list depends on the value of first drop down list. Now, what I want is that if there is no data coming from json for second drop down list then it should be disabled, else it should be enabled This is my code : HTML :

<select name="complaint-category" id="complaint-category"></select>
<select name="sub-category" id="sub-category" disabled></select>

Javascript :

                 for (var i = 0; i < tempLen; i++) {
                  if (response[i].parents == 0) {
                    $("#complaint-category").append("<option value=" + view.collection.models[i].get("tid") + ">" + view.collection.models[i].get("name") + "</option>");
                }
            }
            $('#complaint-category').selectmenu('refresh');
            var selectedTID = $("#complaint-category").val();
            for (var i = 0; i < tempLen; i++) {
               if (view.collection.models[i].get("parents").indexOf(selectedTID) >= 0) {

                 $("#sub-category").append("<option value=" + view.collection.models[i].get("tid") + ">" + view.collection.models[i].get("name") + "</option>");
               }
           }
           $('#sub-category').selectmenu('refresh');
          //End of one function
          events: {
                "change #complaint-category": "selectSubCategory"
          },
          //End of 2nd function
          selectSubCategory: function() {
                var selectedTID = $("#complaint-category").val();
                $("#sub-category").text("");
                var tempLen = this.collection.length;
                for (var i = 0; i < tempLen; i++) {
                    if (this.collection.models[i].get("parents").indexOf(selectedTID) >= 0) {
                        $("#sub-category").append("<option value=" + this.collection.models[i].get("tid") + ">" + this.collection.models[i].get("name") + "</option>");
                    }
                }
                $('#sub-category').selectmenu('refresh');

            }//End of 3rd function

JSON :

[{
"tid": "45",
"vid": "2",
"name": "Cleaning",
"description": "Cleaning",
"format": "filtered_html",
"weight": "0",
"depth": 0,
"parents": ["0"]
 },
 {
"tid": "1",
"vid": "2",
"name": "Electrical Board",
"description": "",
"format": "filtered_html",
"weight": "2",
"depth": 0,
"parents": ["0"]
 },
 {
"tid": "3",
"vid": "2",
"name": "Leakage",
"description": "",
"format": "filtered_html",
"weight": "3",
"depth": 0,
"parents": ["0"]
 },
 {
"tid": "5",
"vid": "2",
"name": "Kitchen",
"description": "",
"format": "filtered_html",
"weight": "0",
"depth": 1,
"parents": ["3"]
 },
 {
"tid": "6",
"vid": "2",
"name": "WashRoom",
"description": "",
"format": "filtered_html",
"weight": "1",
"depth": 1,
"parents": ["3"]
 },
 {
"tid": "2",
"vid": "2",
"name": "Wall Color",
"description": "",
"format": "filtered_html",
"weight": "4",
"depth": 0,
"parents": ["0"]
 },
 {
"tid": "4",
"vid": "2",
"name": "Floor Tiles",
"description": "",
"format": "filtered_html",
"weight": "5",
"depth": 0,
"parents": ["0"]
 }]

I am using backbone.js as well

Answer 1

You can put the if else condition on the success function of ajax call for populating the list

$.ajax({ url : yourUrl, success:function(jsonData) { if(jsonData.lenth == 0) //disable dropdown box } })

Answer 2

Your json is enclosed in an array, so you can check the length to determine if it has any elements.

if(jsonData.length) {
   // enable the second dropdown
   $('second_dropdown_selector').removeAttr('disabled');

   // your code goes here
} else {
   // it is blank, disable the dropdown and also remove all options
   $('second_dropdown_selector').empty();
   $('second_dropdown_selector').attr('disabled','disabled');
}

Hope that helps.