Как получить несколько выпадающих списков с помощью jquery json

Question

Здравствуйте, ребята, я хочу изменить состояние, основанное на стране и городе в соответствии с состоянием. но я не могу использовать ajax, я хочу получить только на основе javascript и json массива.

<label>Country:</label><br/> 
      <select onchange="getval(this)"> 
      <option value="">Select Country</option> 
      <option value="india">India</option> 
      <option value="america">America</option> 
      </select> 


     <select name="" id=""> 
      <option value="">Select State</option> 
      <option value="india">Orissa</option> 
      <option value="india">Telangan</option> 
      <option value="america">USA</option> 
      <option value="america">California</option> 
     </select> 



    <select name="" id=""> 
     <option value="">Select city</option> 
     <option value="orissa">Nal</option> 
     <option value="orissa">Mir</option> 
     <option value="Telangan">Hyd</option> 
     <option value="Telangan">Vija</option> 
     <option value="america">KRK</option> 
     <option value="america">MRK</option> 
    </select> 

Как изменить состояние по стране. и после этого измените город на основе состояния, используя только javascript и json.

Заранее спасибо.

Answer 1

Вы просите об этом под видом необходимости помощи, но вы упомянули о назначении в своих комментариях. Мы не здесь, чтобы твоя домашняя работа для тебя.

Несмотря на это, и на благо других людей, вот рабочий пример:

https://jsfiddle.net/Twisty/5781ygy8/

HTML

<div class="select_wrapper"> 
    <label>Country:</label> 
    <select id="country"> 
    <option value="0"></option> 
    <option value="1">India</option> 
    <option value="2">America</option> 
    </select> 
</div> 
<div class="select_wrapper hidden"> 
    <label>State:</label> 
    <select id="state"> 
    <option value="0"></option> 
    <option value="1" data-country="1">Orissa</option> 
    <option value="2" data-country="1">Telangan</option> 
    <option value="3" data-country="2">California</option> 
    </select> 
</div> 
<div class="select_wrapper hidden"> 
    <label>City:</label> 
    <select id="city"> 
    <option value=""></option> 
    <option data-state="1">Nal</option> 
    <option data-state="1">Mir</option> 
    <option data-state="2">Hyd</option> 
    <option data-state="2">Vija</option> 
    <option data-state="3">KRK</option> 
    <option data-state="3">MRK</option> 
    </select> 
</div> 

CSS

.select_wrapper { 
    width: 100px; 
    display: inline-block; 
} 

.select_wrapper label { 
    display: block; 
    margin: 3px auto; 
} 

.hidden { 
    display: none; 
} 

JQuery

$(function() { 
    $("#country").change(function() { 
    console.log("INFO: Country Selected, ", $(this).val()); 
    var sel = $(this).val(); 
    $("#state").val(""); 
    $("#state option").hide(); 
    $("#city").val(""); 
    $("#city option").hide(); 
    $("#city").parent().addClass("hidden"); 
    if (sel === "0") { 
     $("#state").val(""); 
     $("#state").parent().addClass("hidden"); 
     $("#city").val(""); 
     $("#city").parent().addClass("hidden"); 
     return false; 
    } 
    $("#state option[data-country!='" + sel + "']").hide(); 
    $("#state option[data-country='" + sel + "']").show(); 
    $("#state").parent().removeClass("hidden"); 
    }); 
    $("#state").change(function() { 
    var sel = $(this).val(); 
    if (sel === "0") { 
     $("#city").val(0); 
     $("#city").parent().addClass("hidden"); 
     return false; 
    } 
    $("#city > option[data-state!='" + sel + "']").hide(); 
    $("#city > option[data-state='" + sel + "']").show(); 
    $("#city").parent().removeClass("hidden"); 
    }); 
}); 

Вот где я обычно объяснять каждую часть, но так как это для вашего назначения, я подозреваю, что все это будет очень ясно изучаемым и узнал человек как сама себя.