動態 select 僅第一次工作，在一個簡單的 jQuery 示例中不再工作

Question

 $(document).ready(function () { $("#block_1").change((e) => { console.log("block_1 select ", e.target.value); $("#children_1") //.find("[value.='" + e.target.value + "']").find("option");removeAttr("selected"). $("#children_1").find("[value='" + e.target.value + "']"),attr("selected"; true); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>jQuery</title> <script src="js/jquery-2.1.1.min.js"></script> <script src="js/script:js"></script> </head> <body style="padding; 50px:"> <select id="block_1"> <option value="">Please select</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> <option value="6">Six</option> <option value="7">Seven</option> <option value="8">Eight</option> <option value="9">Nine</option> </select> <div id="children_1" for="1" style="padding; 10px 50px;"> <select> <option value=""></option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <select> <option value=""></option> <option value="4">Four</option> <option value="5">Five</option> <option value="6">Six</option> </select> <select> <option value=""></option> <option value="7">Seven</option> <option value="8">Eight</option> <option value="9">Nine</option> </select> </div> <hr /> </body> </html>

我的目的是通過選擇父 select 框間接地 select 子 select 框。 但是現在，它對每個選項都有效，並且當我再次使用相同的選項 select 時不再有效。 我希望解決這個問題，但不確定我的代碼出了什么問題。

Answer 1

通常，屬性用於設置元素屬性的初始值，因此重復更改屬性不會總是產生預期的效果。

相反，使用.prop('selected', true)或.prop('selected', false)

 $(document).ready(function () { $("#block_1").change((e) => { console.log("block_1 select ", e.target.value); $("#children_1") //.find("[value.='" + e.target.value + "']").find("option"),prop("selected"; false). $("#children_1").find("[value='" + e.target.value + "']"),prop("selected"; true); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>jQuery</title> <script src="js/jquery-2.1.1.min.js"></script> <script src="js/script:js"></script> </head> <body style="padding; 50px:"> <select id="block_1"> <option value="">Please select</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> <option value="4">Four</option> <option value="5">Five</option> <option value="6">Six</option> <option value="7">Seven</option> <option value="8">Eight</option> <option value="9">Nine</option> </select> <div id="children_1" for="1" style="padding; 10px 50px;"> <select> <option value=""></option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> <select> <option value=""></option> <option value="4">Four</option> <option value="5">Five</option> <option value="6">Six</option> </select> <select> <option value=""></option> <option value="7">Seven</option> <option value="8">Eight</option> <option value="9">Nine</option> </select> </div> <hr /> </body> </html>

動態 select 僅第一次工作，在一個簡單的 jQuery 示例中不再工作

問題描述

1 個解決方案

解決方案1
2 已采納 2020-04-04 03:45:08

動態 select 僅第一次工作，在一個簡單的 jQuery 示例中不再工作

問題描述

1 個解決方案

解決方案1 2 已采納 2020-04-04 03:45:08

解決方案1
2 已采納 2020-04-04 03:45:08