如何根据另一个列表的值填充下拉列表

Jquery链式插件将满足您的目的，

https://plugins.jquery.com/chained/

使用链接-http://www.appelsiini.net/projects/chained

这个插件将链接你的文本框。

根据您的需求，您必须使用以下选项填充此代码：

var x;
$('#pu-country').on('change', function () {
    if (this.value != '0') {
        $('#pu-city').prop('disabled', false);
        $('#pu-city').find("option").not(":first").remove();
        $('#pu-location').prop('disabled', true);
        $('#pu-location').val("Choose");
        switch (this.value) {
            case 'A':
                x = '<option value="A.1">A.1</option><option value="A.2">A.2</option><option value="A.3">A.3</option>'
        }
        $('#pu-city').append(x)
    } else {
        $('#pu-location').prop('disabled', true);
        $('#pu-location').val("Choose");
        $('#pu-city').prop('disabled', true);
        $('#pu-city').val("Choose");
    }

});
$('#pu-city').on('change', function () {
    if (this.value != '0') {
        $('#pu-location').prop('disabled', false);
        $('#pu-location').find("option").not(":first").remove();
        switch (this.value) {
            case 'A.1':
                x = '<option value="A.1.1">A.1.1</option><option value="A.1.2">A.1.2</option><option value="A.1.3">A.1.3</option>'
                break;
            case 'A.2':
                x = '<option value="A.2.1">A.2.1</option><option value="A.2.2">A.2.2</option><option value="A.2.3">A.2.3</option>'
                break;
            case 'A.3':
                x = '<option value="A.3.1">A.3.1</option><option value="A.3.2">A.3.2</option><option value="A.3.3">A.3.3</option>'
                break;
        }
        $('#pu-location').append(x)
    } else {
        $('#pu-location').prop('disabled', true);
        $('#pu-location').val("Choose");
    }

});

我还设置了一个演示，以查看更多选项的功能。

FIDDLE

您的代码应该是这样的：

$(country).change(function(){
var l=Document.getElementByID("country"); 
for(i=0;i<=l.length;i++)
    {
    if(l.options[i].selected?)
       {
       text_array=[HERE YOU NEED TO ADD THE CITIES OF l.options[i].text];
       val_array=[HERE YOU NEED TO ADD THE VALUES OF THECITIES OF l.options[i].text];
       }
    }
var c=Document.getElementByID("city"); 
    c.options.text=[];
    c.options.value=[];
//You now should have an empty select.
    c.options.text=text_array ;
    c.options.value=val_array ;
});

正如我不知道的，你使用什么样的数据库，让城市与他们的国家相连，我不能告诉你，大写文本中应该放什么。。。

Ciao j888，
在这个小提琴中，我试图重建与您提供链接的网站相同的系统
州、城市和地区的数量较少，但概念保持不变
如果要添加新状态，必须在select#paese中输入一个新的html选项。
然后在obj.citta中添加一个具有此id名称的属性和一个值的cities数组
obj.localita也是如此，您将在其中创建一个数组数组。您需要的jQuery代码是

<script type="text/javascript">
$(document).ready(function(){
    var obj={
        citta:{ //value is the same of option id
            albania:['Durres','Tirana'],
            austria:['Vienna','innsbruck','Graz'],
            },
        localita:{//for every city create a sub array of places
            albania:[['località Durres1','località Durres 2'],['località Tirana','località Tirana 2']],
            austria:[['località Vienna','località Vienna 2'],['località innsbruck','località innsbruck 2'],['località Graz','località Graz 2','località Graz 3']],
            }   
        }
    $('#paese').on('change',function(){
        $('#località').attr('disabled','disabled').find('option').remove()
        var quale=$(this).find('option:selected').attr('id')
        var arr=obj.citta[quale]
        if(arr){
            $('#citta').removeAttr('disabled')
            $('#citta option.added').remove()
            for(i=0;i<arr.length;i++){
                $('<option class="added">'+arr[i]+'</option>').appendTo('#citta')
                }
            }
        })
    $('#citta').on('change',function(){
        var ind=($(this).find('option:selected').index())-1
        var quale=$('#paese').find('option:selected').attr('id')
        var arr=obj.localita[quale][ind]
        if(arr){
            $('#località').removeAttr('disabled')
            $('#località option.added').remove()
            for(i=0;i<arr.length;i++){
                $('<option class="added">'+arr[i]+'</option>').appendTo('#località')
                }
            }
        })
})
</script>

如果这个解决方案不适合您的需要，我很抱歉让您浪费时间。

嗨，我在yii 1中为许可证及其从属主题做了这件事。许可下拉列表//php代码foreach（$subject为$v）{$j=$v['licenseId']。"："$v["主题Id"]。"："$v['displayName']。"；"；}Yii:：app（）->clientScript->registerScript（'variables'，'var subj="'.$subj.'"；'，CClientScript:：POS_HEAD）；？>

//javascript code
jQuery(document).ready(function($) {
    //subject. dependent dropdown list based on licnse
    var ty, subjs = subj.split(';'), subjSel = []; //subj register this varible from php it is

  for(var i=0; i<subjs.length -1; i++) { //-1 caters for the last ";"
    ty = subjs[i].split(":");
    subjSel[i] = {licId:ty[0], subjId:ty[1], subjName:ty[2]};
  }
    //dropdown license
  jQuery('#license#').change(function() {
    $('#add').html(''); //clear the radios if any
    val = $('input[name="license"]:checked').val();
    var selectVals = "";
        selectVals += '<select>';
    for(var i=0; i<subjSel.length; i++) {
      if(subjSel[i].licId == val) {
        if(subjSel[i].subjId *1 == 9) continue;
        selectVals += '<option value="'+subjSel[i].subjId+'">'+subjSel[i].subjName+'</option>';
      }
    }
        selectVals += '</select>';
    $("#subject").html(selectVals);
  });
});

您似乎在问两个问题：

问题1。如何具有禁用的选择框（在您的示例中为第二个和第三个选择框），该框在从第一个选择框中选择选项时激活。

答案1：只需使用disabled=true/false如下。。。

<select id="country" name="country" label="Country" onchange="document.getElementById('city').disabled=false; findCities(this.value)"/> <select id="city" name="city" label="Location" disabled=true/>

注意：我将"s:select"改为"select"，因为您的问题没有引用或标记使用此语法的Struts框架

问题2：当在第一个选择框中进行选择时，如何填充第二个选择框。

答案2：有很多方法可以做到这一点，选择取决于你在哪里有数据来填充列表。在您的Rentalcars示例中，如果您选择Barbados，浏览器会向"http://www.rentalcars.com/AjaxDroplists.do；jsessionid=5DCBF81333A88F37BC7AE15D21E10C41.node012a？country=巴巴多斯；wrapNonAirports=true"-试着点击这个链接，你会看到该请求正在发送回什么。这个".do"地址是一个服务器端文件，与我上面提到的Struts框架一起使用。

function findCities(country)中包含的一种更传统的方法是向PHP脚本发送AJAX请求，该脚本查询数据库并向浏览器发回一组地名。AJAX javascript代码包括关于如何处理响应的指令。如果不知道更多关于列表存储位置的信息，那么举一个例子很可能是没有用的。

或者，整个位置列表可以作为数组（如上Devima所述）包含在javascript脚本中，也可以作为逗号分隔值包含在服务器上的文本文档中，如果离线使用有用，也可以将其保存到浏览器数据库（如WebSQL或IndexedDB）中。

当您得到您的列表时，可能是作为一个值数组，您可以将数组保存为一个变量，例如var cities=result（在一个简单的ajax请求的情况下）。然后，您需要迭代cities，例如

for (var i = 0; i < cities.length; i++){
var place=cities[i];//an individual city name
document.getElementById("city").innerHTML+="<option value='" + place + "'>" + place + "</option>";//adds an 'option' with the value being the city name and the text you see being the city name
}

IMO这是AngularJS设计用于完全缓解的基本情况。看看吧！