对多个选项进行筛选数组以在新选择中返回选项

Filtering array on multiple options to return options in new select

本文关键字：选项 新选择 选择 返回 数组 筛选      更新时间：2023-09-26

我支持一些遗留代码，但在实现新功能时遇到了一些问题。

我有 2 个多选选项，第一个显示州列表，第二个显示城市列表。这个想法是，城市列表将根据第一个选择中的所选州进行过滤。

目前，城市包含在一个javascript数组中，该数组在if语句中使用，以将相关选项附加到选择中，howeber仅适用于单个状态选择。

如何在多个州选择中筛选城市？

我尝试了许多if语句组合，但没有运气。我的jquery知识显然缺乏，并且在google/stackoverflow中没有找到类似的东西 - 但是我很欣赏我可能从错误的角度接近了这一点。

<form name="newform">
<select multiple size="10" name="getStateSelect" id="getStateSelectID" onchange="GetSeries(document.newform.getStateSelect.options [document.newform.getStateSelect.selectedIndex].value);">
    <option value="1">Alaska</option>
    <option value="2">Arizona</option>
    <option value="3">Californa</option>
</select>
<br />
<br />
<select id="getCitySelect" multiple="multiple" size="10"></select>
</form>

var fsArray = [{id: 1,stateid: 1,cityname: "Anchorage"}, 
    {id: 2,stateid: 1,cityname: "Fairbanks"}, 
    {id: 3,stateid: 1,cityname: "Wasilla"}, 
    {id: 4,stateid: 2,cityname: "Flagstaff"}, 
    {id: 5,stateid: 2,cityname: "Phoenix"}, 
    {id: 6,stateid: 2,cityname: "Tucson"}, 
    {id: 7,stateid: 3,cityname: "Fremont"}, 
    {id: 8,stateid: 3,cityname: "Lakeport"}, 
    {id: 9,stateid: 3,cityname: "Los Angeles"}];
function GetSeries(i) {
var SeriesSelectBox = document.getElementById("getCitySelect");
SeriesSelectBox.options.length = 0;
for (j in fsArray) {
    if (fsArray[j].stateid == i) {
        var seriesLength = SeriesSelectBox.options.length;
        SeriesSelectBox.options[seriesLength] = new Option(fsArray[j].cityname, fsArray[j].id);
    }
}
}

http://jsfiddle.net/fcp3h7mw/1/

任何帮助非常感谢！谢谢

我刚刚在getStateSelectID值上添加了一个for循环，以检查每个元素的选择状态，如果选择，它会运行循环以添加城市。

小提琴：http://jsfiddle.net/fcp3h7mw/5/

JavaScript：

var fsArray = [
    {id:1,stateid:1,cityname:"Anchorage"},
    {id:2,stateid:1,cityname:"Fairbanks"},
    {id:3,stateid:1,cityname:"Wasilla"},
    {id:4,stateid:2,cityname:"Flagstaff"},
    {id:5,stateid:2,cityname:"Phoenix"},
    {id:6,stateid:2,cityname:"Tucson"},
    {id:7,stateid:3,cityname:"Fremont"},
    {id:8,stateid:3,cityname:"Lakeport"},
    {id:9,stateid:3,cityname:"Los Angeles"}
];
function GetSeries(i) {     
    var id = document.getElementById("getStateSelectID");
    var SeriesSelectBox = document.getElementById("getCitySelect");
    SeriesSelectBox.options.length = 0;     
    var states = 0;
    for (states=0; states < id.length; states++) {
        if(id[states].selected){
            for (j in fsArray) {
                if (fsArray[j].stateid == id[states].value) {
                    var seriesLength = SeriesSelectBox.options.length;
                    SeriesSelectBox.options[seriesLength] = new Option(fsArray[j].cityname, fsArray[j].id);     
                }
            }
        }   
    }
}

标记：我还在标记中取出了很多函数调用

<select multiple size="10" name="getStateSelect" id="getStateSelectID" onchange="GetSeries();">

我已经更新了您的代码，以便能够选择多个州并显示正确的城市。

本质上，您需要获取属性为"selected"的选项列表，并将选项值存储在数组中（onchange）

之后，您将循环访问新数组并与数组中的值而不是单个值进行匹配。

以下是更新的代码：http://jsfiddle.net/biz79/fcp3h7mw/3/

var fsArray = [
    {id:1,stateid:1,cityname:"Anchorage"},
    {id:2,stateid:1,cityname:"Fairbanks"},
    {id:3,stateid:1,cityname:"Wasilla"},
    {id:4,stateid:2,cityname:"Flagstaff"},
    {id:5,stateid:2,cityname:"Phoenix"},
    {id:6,stateid:2,cityname:"Tucson"},
    {id:7,stateid:3,cityname:"Fremont"},
    {id:8,stateid:3,cityname:"Lakeport"},
    {id:9,stateid:3,cityname:"Los Angeles"}
];
function getSeries() {      
    var SeriesSelectBox = document.getElementById("getCitySelect");
    SeriesSelectBox.options.length = 0;     
    var arr = getStateSelected();
    for (var i = 0; i< arr.length; i++) {
        for (var j in fsArray) {
            if (fsArray[j].stateid == arr[i]) {
                var seriesLength = SeriesSelectBox.options.length;
                SeriesSelectBox.options[seriesLength] = new Option(fsArray[j].cityname, fsArray[j].id);     
          }
        }
    }
}
function getStateSelected() {
    var sel = document.querySelectorAll('#getStateSelectID option');
    var arr = [];
    for (var i = 0; i< sel.length; i++ ) {
        if ( sel[i].selected ) {
          arr.push(sel[i].value);   
        }
    }
    return arr;
}

希望这有帮助。 如果您有任何疑问，请告诉我。

相关文章：