兩個自動完成變量，第二個應該依賴於第一個 - Simple JS

Question

我確定這個問題以前發布過，但沒有在 javascript/jquery 中找到它。

所以我有兩個輸入，第一個是城市，第二個是我們在第一個輸入中選擇的特定城市的一部分：

 $(function() { var city = ["option1", "option2", "option3", "option4"]; $("#city").autocomplete({ source: city }); var addressforoption1 = ["a1", "a2", "a3", "a4"]; var addressforoption2 = ["b1", "b2", "b3", "b4"]; var addressforoption3 = ["c1", "c2", "c3", "c4"]; var addressforoption4 = ["d1", "d2", "d3", "d4"]; var answer = document.querySelector('#city').value;//tried changing this to innerText or innerHTML still the same if (answer = "option1") { address = addressforoption1 } if (answer = "option2") { address = addressforoption2 } if (answer = "option3") { address = addressforoption3 } if (answer = "option4") { address = addressforoption4 } $("#location").autocomplete({ source: address }); });

 <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <label for="city">➡ City<span style="color:red;">*</span></label> <input type="text" required name="city" id="city" placeholder="Enter your city name here"> <hr> <label for="location">➡ Location<span style="color:red;">*</span></label> <input type="text" required name="location" id="location" placeholder="City location">

問題：第一個自動完成功能很有用，你可以選擇任何你想要的城市，就像它應該的那樣。 但是第二個自動完成總是最后一個 - 選項 4

Answer 1

您必須使用雙等號運算符 ( == ) 進行比較，然后將您的代碼更改為類似這樣的內容

 $(function() { var city = ["option1", "option2", "option3", "option4"]; var addressforoption1 = ["a1", "a2", "a3", "a4"]; var addressforoption2 = ["b1", "b2", "b3", "b4"]; var addressforoption3 = ["c1", "c2", "c3", "c4"]; var addressforoption4 = ["d1", "d2", "d3", "d4"]; $("#city").autocomplete({ source: city, select: function(event, ui) { var answer = ui.item.value; if (answer == "option1") { address = addressforoption1 } else if (answer == "option2") { address = addressforoption2 } else if (answer == "option3") { address = addressforoption3 } else if (answer == "option4") { address = addressforoption4 } else { address = [] } $("#location").autocomplete('option', 'source', address); } }); $("#location").autocomplete({ source: [] }); });

 <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <label for="city">➡ City<span style="color:red;">*</span></label> <input type="text" required name="city" id="city" placeholder="Enter your city name here"> <hr> <label for="location">➡ Location<span style="color:red;">*</span></label> <input type="text" required name="location" id="location" placeholder="City location">

Answer 2

我添加了select並change了代碼的方法。

select - 您可以使用自動完成中的select屬性來傳遞所選值，這里我只調用 function setAddressValue ，它基本上與您之前所做的相同。

change - select 僅在用戶實際從自動完成列表中選擇值時處理。 如果我手動輸入option1然后嘗試，什么都不會發生。 因此，我添加了change方法，它基本上會在用戶離開輸入字段時進行檢查。

 $(function() { const city = ["option1", "option2", "option3", "option4"]; $("#city").autocomplete({ source: city, select: function(event, ui) { setAddressValue(ui.item.value); } }).change(function() { setAddressValue(this.value); }); const setAddressValue = (answer) => { let address = []; if (answer === "option1") address = ["a1", "a2", "a3", "a4"]; else if (answer === "option2") address = ["b1", "b2", "b3", "b4"]; else if (answer === "option3") address = ["c1", "c2", "c3", "c4"]; else if (answer === "option4") address = ["d1", "d2", "d3", "d4"]; else adress $("#location").autocomplete({ source: address }); } });

 <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script> <label for="city">➡ City<span style="color:red;">*</span></label> <input type="text" required name="city" id="city" placeholder="Enter your city name here"> <hr> <label for="location">➡ Location<span style="color:red;">*</span></label> <input type="text" required name="location" id="location" placeholder="City location">

---

注意： if(answer = "option1")會將option1分配給answer 。 本質上，您所做的是檢查answer是否為真值，以及字符串是否為真值。 因此，所有 if-cases 都是真實的。 ，這就是為什么它總是顯示最后一個，它通過了所有。 您需要做==或===進行比較。

不要使用var 。 對於您不會重新分配的變量使用const ，對於您想要重新分配值的變量使用let 。