Javascript 过滤多个选项上的数组以返回新选择中的选项
我支持一些遗留代码,在实现新功能时遇到了一些问题 我有两个多选选项,第一个显示州列表,第二个显示城市列表。其想法是,城市列表将根据第一次选择中选定的州进行过滤 目前,城市包含在一个javascript数组中,该数组在if语句中用于将相关选项附加到select,但这仅适用于单个状态选择 如何筛选多个州选择的城市 我尝试了很多if语句组合,但都没有成功。我的jquery知识显然是缺乏的,在google/stackoverflow中没有发现任何类似的东西——但是我很感激我可能从错误的角度来处理这个问题Javascript 过滤多个选项上的数组以返回新选择中的选项,javascript,jquery,html,Javascript,Jquery,Html,我支持一些遗留代码,在实现新功能时遇到了一些问题 我有两个多选选项,第一个显示州列表,第二个显示城市列表。其想法是,城市列表将根据第一次选择中选定的州进行过滤 目前,城市包含在一个javascript数组中,该数组在if语句中用于将相关选项附加到select,但这仅适用于单个状态选择 如何筛选多个州选择的城市 我尝试了很多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);
}
}
}
非常感谢您的帮助!
谢谢我已经更新了您的代码,可以选择多个州并显示正确的城市 本质上,您需要获得一个属性为selected的选项列表,并将选项值存储在一个数组onchange中 之后,您将遍历新数组,并与数组中的值(而不是单个值)进行匹配 以下是更新的代码:
希望这有帮助。如果您有问题,请告诉我。我刚刚在getStateSelectID值上添加了一个for循环,以检查每个元素是否处于选择状态,如果选中,它将运行您的循环以添加城市 小提琴: 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();">
谢谢你的回答,他们都解决了我的问题。我选择这个答案作为最有用的,因为它需要最少的代码量。
<select multiple size="10" name="getStateSelect" id="getStateSelectID" onchange="GetSeries();">