添加选定的jQuery来更改基于第一个选择列表选项的第二个选择列表

我使用下面的代码从“Use jQuery to change a second select list based on the first select list option” 更改基于第一个选择列表选项的第二个选择列表。它工作得很好。但是，如何将这两个选项的“选定”属性分配给此代码的选项。添加选定的jQuery来更改基于第一个选择列表选项的第二个选择列表

的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" 
    ] 
}

来源

2017-07-25 Lewis

你可以尝试这样的事情，如果你知道你在找什么确切的期权价值选择：

$(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>

来源

2017-07-25 16:51:23 Woodrow

大，由于是它的工作原理:-) – Lewis

不客气。如果它解决了您的问题，请接受答案。 – Woodrow

添加选定的jQuery来更改基于第一个选择列表选项的第二个选择列表

回答

相关问题