Question

我已下载并尝试了相关组合框的代码。这是HTML＆amp;的JavaScript。它运行良好。但我的问题是，当我想选择多个选项/值时，在依赖的组合框中，我不知道该怎么做。

例如，如果我想为该国家选择加拿大，请选择多伦多＆amp;蒙特利尔为城市。

我知道我们必须将第二个组合框的字段名称更改为数组，因此我可以捕获PHP中的所有选定选项。来自name =＆＃34; cities＆＃34;到 name =＆＃34; cities []＆＃34; 。但我不在这里工作。请帮我解决这个问题，怎么做。所以我可以选择多个值的选项。

这是代码

<form name="classic">
    <select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px">
        <option selected>Select A City</option>
        <option value="usa">USA</option>
        <option value="canada">Canada</option>
        <option value="uk">United Kingdom</option>
    </select>

    <select name="cities" size="4" style="width: 150px" onClick="alert(this.options[this.options.selectedIndex].value)" >
    </select>
</form>

<script type="text/javascript">

    var countrieslist=document.classic.countries
    var citieslist=document.classic.cities

    var cities=new Array()
    cities[0]=""
    cities[1]=["New York|newyorkvalue", "Los Angeles|loangelesvalue", "Chicago|chicagovalue", "Houston|houstonvalue", "Austin|austinvalue"]
    cities[2]=["Vancouver|vancouvervalue", "Tonronto|torontovalue", "Montreal|montrealvalue", "Calgary|calgaryvalue"]
    cities[3]=["London|londonvalue", "Glasgow|glasgowsvalue", "Manchester|manchestervalue", "Edinburgh|edinburghvalue", "Birmingham|birminghamvalue"]

    function updatecities(selectedcitygroup){
        citieslist.options.length=0
        if (selectedcitygroup>0){
            for (i=0; i<cities[selectedcitygroup].length; i++)
                citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
            }
        }
    }

</script>

最诚挚的问候，SJAinun

Answer 1

在主题中选择选择列表中的多个值并在提交到PHP脚本时提供数组时，添加＆＃34; multiple＆＃34;属性并附加PHP数组推送速记＆＃34; []＆＃34;到输入名称值（在这种情况下name=cities[]）完成。

在这种情况下，更改＆＃34;城市的名称＆＃34;选择列表会导致var citieslist=document.classic.cities失败，因为它不再存在。要解决这个问题，可以在选择列表中添加id="cities"属性，或者使用带有字符串键的方括号表示法：var citieslist=document.classic['cities[]']。

此外，在提供的代码中，for循环缺少左大括号。

<form name="classic">
    <select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px">
        <option selected>Select A City</option>
        <option value="usa">USA</option>
        <option value="canada">Canada</option>
        <option value="uk">United Kingdom</option>
    </select>

    <select multiple name="cities[]" size="4" style="width: 150px">
    </select>
</form>

<script type="text/javascript">

    var countrieslist=document.classic.countries;
    var citieslist=document.classic['cities[]'];

    var cities=new Array()
    cities[0]=""
    cities[1]=["New York|newyorkvalue", "Los Angeles|loangelesvalue", "Chicago|chicagovalue", "Houston|houstonvalue", "Austin|austinvalue"]
    cities[2]=["Vancouver|vancouvervalue", "Tonronto|torontovalue", "Montreal|montrealvalue", "Calgary|calgaryvalue"]
    cities[3]=["London|londonvalue", "Glasgow|glasgowsvalue", "Manchester|manchestervalue", "Edinburgh|edinburghvalue", "Birmingham|birminghamvalue"]

    function updatecities(selectedcitygroup){
        citieslist.options.length=0
        if (selectedcitygroup>0){
            for (i=0; i<cities[selectedcitygroup].length; i++) {
                citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
            }
        }
    }

</script>

具有多个选择的从属组合框

1 个答案: