动态更改选择框[重复]

Question

我有两个选择框。

第一个包含大类别，第二个包含小类别，例如 国家和城市。

America    carifornia,NY,Sandiego
China      beijing, shanghai
Japan      tokyo, oosaka

第一个选择框

<select name=countries>
<option value=america>America</option>
<option value=china>China</option>
<option value=japan>Japan</option>
</select>

第二个选择框

<select name=usacities>
<option value=carifornia>carifornia</option>
<option value=ny>NY</option>
<option value=sandiego>sandiego</option>
</select>

现在我想根据第一个选择框动态更改第二个选择框。

使用 jquery 是最好的方法？？

那时我应该更改所有选择框，包括选择标签？还是我应该只将数据保留在某处并仅更改数据？

Answer 1

试试这个：将第二个选择框的类属性与国家选择框的值相同。就像把 class="america" 放在第二个选择框里，等等其他国家的值和他们的选择框。还要在所有城市选择框中再添加一个类“城市”。现在使用下面的代码 -

HTML：

<select name=countries>
  <option value=america>America</option>
  <option value=china>China</option>
  <option value=japan>Japan</option>
</select>

<select name=chinacities class="america cities">
  <option value=carifornia>carifornia</option>
  <option value=ny>NY</option>
  <option value=sandiego>sandiego</option>
</select>

<select name=usacities class="china cities">
  <option value=china1>china1</option>
</select>

<select name=japancities class="japan cities">
  <option value=japan1>japan1</option>
</select>

jQuery :

$(function(){
      // hide all city select boxes
      $('.cities').hide();
      //make default selected country's city visible
      $('.' + $('select[name=countries]').val() ).show();
      $('select[name=countries]').change(function(){
        // hide all city select boxes
        $('.cities').hide();
        //show city select box for selected country 
        var selectedCountry = $(this).val();
        $('.' + selectedCountry ).show();
      });
  });

JSFiddle Demo

Answer 2

我认为你有两个解决方案：

1. 将您的数据存储在某处，每次从数据中填充第二个<select>。
2. 使用 Ajax 更改 select1 并通过 ajax 请求更新 select2 内容。

我在你的情况下使用第一个解决方案：

var usacities = [   
                { "name" : "carifornia",  
                  "country"  : "america"},

                 { "name" : "NY",  
                  "country"  : "america"},

                { "name" : "Sandiego",  
                  "country"  : "america"},

                 { "name" : "beijing",  
                  "country"  : "china"},

                 { "name" : "shanghai",  
                  "country"  : "china"},

                 { "name" : "tokyo",  
                  "country"  : "japan"},

                  { "name" : "oosaka",  
                  "country"  : "japan"},


              ] 


$(document).ready(function(){
$("select[name = countries ]").on("change", function(){
     var selected = $(this).val();
     $("select[name = usacities]").html("");
         for(i=0; i<usacities.length; i++)
         {
             if(usacities.country == selected)
                $("select[name = usacities]").append("<option value='"+usacities.name+"'>" + usacities.country + "</option>");
         }
   });
});

Answer 3

是的。您可以更改使用 JQuery。如果你不想使用数据库，你可以使用 jquery 作为

 $('select[name=countries]').change(function(){
   var country =  $(this).val();
   $('.'+country+'cities').show();
 }

Answer 4

试试这个：

<select name=countries id="country">
    <option value=america>America</option>
    <option value=china>China</option>
    <option value=japan>Japan</option>
</select>

<select name="cities" class="cities">
    <option data-parent = "default" value="">Select city</option>
    <option data-parent = "america" value=carifornia>carifornia</option>
    <option data-parent = "america" value=ny>NY</option>
    <option data-parent = "america" value=sandiego>sandiego</option>
    <option data-parent = "china" value=japan1>china1</option>
    <option data-parent = "japan" value=china1>japan1</option>
    <option data-parent = "japan" value=china1>japan2</option>
    <option data-parent = "japan" value=china1>japan3</option>
</select>



$(function(){
    $('select[name=countries]').change(function(){
        // hide all city select boxes
        $('.cities > option').hide();
        //show city select box for selected country 
        var selectedCountry = $("#country").val();
        $(".cities [data-parent = '"+selectedCountry+"']" ).show();
    });
    $('select[name=countries]').change();

});

Answer 5

是的，你可以。

假设数据源具有结构“{Country : { Name, Cities}}”，下一个代码有效，但如果您有其他结构（如数组），则必须进行一些更改。

    //Define the DataSource
    var countries = [{ Name : 'America', Cities : ['carifornia','NY','Sandiego']
    } ,  { Name : 'China', Cities : ['Beijin','Shangai'] } ];

在您需要创建一个在加载文档时执行的函数之后。

//When the document loads is called this function
$(document).on('ready', function(){

在这里，您在第一个 Select 中填写国家/地区

      //Fill the select from countries
        $.each(countries, function(index, value){
            $("#Country").append("<option>"+value.Name+"</option>" );
        });

当用户自动更改国家/地区的选项时，执行此方法，第二次选择仅填充所选国家/地区的城市

        //When a country change the cities are filled
        $("#Country").on("change", function(){
            var selectedCountry = $("#Country").val();
            $("#Cities").empty();
            $.each(countries, function(index, country){

这里

                if(country.Name == selectedCountry)
                {
                //The cities are filled                 
                $.each(country.Cities, function(index, city){
                        $("#Cities").append("<option>"+city+"</option>" );
                    });

                }
            });
        });
    });

HTML 就是这样：

<select id="Country"><option>-</option></select>
<select id="Cities"></select>

有一些更好的方法可以做到这一点，但一开始就很好。