最初の選択リストオプションに基づいて2番目の選択リストを変更するためにjQueryの選択を追加しました

「Use jQuery to change a second select list based on the first select list option」の下のコードを使用して、最初の選択リストオプションに基づいて2番目の選択リストを変更します。それはとてもうまくいく。しかし、どちらの選択に対しても、このコードのオプションに「選択済み」属性をどのように割り当てることができますか。最初の選択リストオプションに基づいて2番目の選択リストを変更するために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

最初の選択リストオプションに基づいて2番目の選択リストを変更するためにjQueryの選択を追加しました

答えて

関連する問題