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

Question

我想实现一个与此相同的搜索框，首先，只要用户从第一个保管箱中选择一个选项，第一个下拉列表就会激活，第二个下拉框将被激活，其列表将被填充。

<s:select id="country" name="country" label="Country" list="%{country} onchange="findCities(this.value)"/>

<s:select id="city" name="city" label="Location" list=""/>

Answer 1

Jquery链式插件将满足您的需求，

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

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

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

Answer 2

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

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");
    }


});

我还设置了一个演示程序来查看功能更多的选项。

小提琴

Answer 3

你的代码应该是这样的：

$(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 ;
});

我不知道，你使用什么样的数据库，让城市连接到他们的国家，我不能告诉你，什么放入大写文本......

Answer 4

Ciao j888，
在这个小提琴中，我试图重建与您提供链接的网站相同的系统
城市和地区的州数量较少，但概念保持不变
如果要添加新状态，则必须在带有id的select＃paese中输入新的html选项。
然后，在obj.citta中添加一个具有此id名称的属性和一个值为cityes的数组。
对于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>

如果这个解决方案不符合您的需求，我会为您浪费时间而道歉。

Answer 5

嗨我已经为许可证及其依赖主题在yii中做了这个1.许可证下拉// php代码foreach（$ subject as $ v）{$ subj。= $ v ['licenseId']。 “：”。 $ v ['subjectId']。 “：”。 $ 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);
  });
});

Answer 6

你似乎在问两个问题：

问题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示例，如果您选择巴巴多斯，则浏览器会向“ http://www.rentalcars.com/AjaxDroplists.do;jsessionid=5DCBF81333A88F37BC7AE15D21E10C41.node012a?country=Barbados&wrapNonAirports=true ”发送ajax GET请求。单击此链接，您将看到该请求发回的内容。 这个'.do'地址是与我上面提到的Struts框架一起使用的类型的服务器端文件。

更常规的方法是将function findCities(country)包含在一个PHP脚本中，该脚本查询数据库并将一组地名发送回浏览器。 AJAX javascript代码包含有关如何处理响应的说明。 如果不了解您希望存储列表的位置的更多信息，那么举一个这样的例子很可能没用。

或者，整个地方列表可以作为数组包含在javascript脚本中（如上面的Devima所示），在服务器上的文本文档中以逗号分隔值的形式包含，或者您可以将其保存到浏览器数据库，如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
}

Answer 7

IMO这是AngularJS旨在完全缓解的基础案例。 看看这个！