為jQuery添加選定對象以基於第一個選擇列表選項更改第二個選擇列表

Question

我使用“ 使用jQuery基於第一選擇列表選項更改第二選擇列表 ”下面的代碼，基於第一選擇列表選項更改第二選擇列表。 效果很好。 但是，如何為這兩個選擇將“ selected”屬性分配給此代碼上的選項。

JavaScript的：

$(document).ready(function () {
"use strict";

var selectData, $states;

function updateSelects() {
    var cities = $.map(selectData[this.value], function (city) {
        return $("<option />").text(city);
    });
    $("#city_names").empty().append(cities);
}

$.getJSON("updateSelect.json", function (data) {
    var state;
    selectData = data;
    $states = $("#us_states").on("change", updateSelects);
    for (state in selectData) {
        $("<option />").text(state).appendTo($states);
    }
    $states.change();
    });
});

HTML：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
    <select id="us_states"></select>
    <select id="city_names"></select>
    <script type="text/javascript" src="updateSelect.js"></script>
</body>
</html>

JSON：

{
"NE": [
    "Smallville",
    "Bigville"
],
"CA": [
    "Sunnyvale",
    "Druryburg",
    "Vickslake"
],
"MI": [
    "Lakeside",
    "Fireside",
    "Chatsville"
    ]
}

Answer 1

如果您知道要選擇的確切選項值，則可以嘗試執行以下操作：

 $(document).ready(function() { "use strict"; var selectData, $states; function updateSelects() { var cities = $.map(selectData[this.value], function(city) { var selected = ""; if (city == "Vickslake") { selected = "selected"; } return $("<option " + selected + "/>").text(city); }); $("#city_names").empty().append(cities); } $.getJSON("https://api.myjson.com/bins/oj1bb", function(data) { var state; selectData = data; $states = $("#us_states").on("change", updateSelects); for (state in selectData) { var selected = ""; if (state == "CA") { selected = "selected"; } $("<option " + selected + "/>").text(state).appendTo($states); } $states.change(); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <select id="us_states"></select> <select id="city_names"></select> <script type="text/javascript" src="updateSelect.js"></script> </body>

為jQuery添加選定對象以基於第一個選擇列表選項更改第二個選擇列表

問題描述

1 個解決方案

解決方案1
0 已采納 2017-07-25 16:51:23

為jQuery添加選定對象以基於第一個選擇列表選項更改第二個選擇列表

問題描述

1 個解決方案

解決方案1 0 已采納 2017-07-25 16:51:23

解決方案1
0 已采納 2017-07-25 16:51:23