CODEWITHSUNDEEP
javascriptjqueryjson
user6689442
user6689442

Reputation:

Display JSON Objects in one select tag

I'm working on a dropdown menu where I need to display the provinces and cities in one select tag.

so on load, it will display all the provinces and when I select one province the list will change to cities.

I able to display list of provinces, but I don't know how to display the cities.

I hope you understand me.

thanks.

CODEPEN

SAMPLE CODE

var province=[ {
    "id": "820000",
    "name": "澳门",
    "city": [ {
        "id": "820001", "name": "澳门"
    }
    ]
}


$(document).ready(function () {
        var provinceListItems = '<option selected="selected" value="">省</option>';
        var citiesListItems = '<option selected="selected" value="">城市</option>';

        for (var i = 0; i < province.length; i++) {
             provinceListItems += "<option value='" + province[i].name + "'>" + province[i].name + "</option>";

         }

         $("#provinceCity").html(provinceListItems);
     });

Upvotes: 1

Views: 126

Answers (1)

Aneesh R S
Aneesh R S

Reputation: 3827

var province=[ 
  {
    "id": "820000",
    "name": "P1",
    "city": [ 
      {
        "id": "820001", "name": "C1P1"
      },
      {
        "id": "820002", "name": "C2P1"
      },
      {
        "id": "820003", "name": "C3P1"
      }
    ]
  },
  {
    "id": "830000",
    "name": "P2",
    "city": [ 
      {
        "id": "830001", "name": "C1P2"
      },
      {
        "id": "830002", "name": "C2P2"
      },
      {
        "id": "830003", "name": "C3P2"
      }
    ]
  }
];

function loadProvince(){
   $("#provinceCity").html("<option value=''>Select province</option>");
  for (var i=0; i<province.length; i++){
    $("#provinceCity").append("<option value='"+province[i]["id"]+"'>"+province[i]["name"]+"</option>");
  }
}

$(document).ready(function(){
  $("#clearBtn").hide();
  loadProvince();
  $("#clearBtn").click(function(){
    loadProvince();
  });
  $("#provinceCity").change(function(){
    for (var i=0; i<province.length; i++){
      if ($(this).val() == province[i]["id"]){
        $("#clearBtn").show();
        $("#provinceCity").empty();
        var cities = province[i]["city"];
        for (var j=0; j<cities.length; j++){
          $("#provinceCity").append("<option value='"+cities[j]["id"]+"'>"+cities[j]["name"]+"</option>");
        }
      }
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="provinceCity">
  <option value=''>Select province</option>
</select> <button id="clearBtn">Clear</button>

Upvotes: 1

Related Questions