如何使用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"); 
    }); 
}); 

这里就是我通常会解释每一个组成部分，但因为这是你的任务，我怀疑，这都将是一个学习十分清楚，了解到个人为自己。