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

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

将您的数据存储在某个位置，每次都从数据填充第二个<select>。
使用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 2

尝试此操作：将第二个选择框的类属性与国家/地区选择框的值相同。就像把class="america"放到第二个选择框中一样，依此类推其他国家的值及其选择框。还要增加一个班级＆＃34;城市＆＃34;到所有城市选择框。现在使用下面的代码 -

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 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(){

在这里填写第一个选择国家/地区

      //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>

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

动态更改选择框

5 个答案: