[英]Two autocomplete variables, second one should depend on first one - Simple JS
提示:本站为国内最大中英文翻译问答网站，提供中英文对照查看，鼠标放在中文字句上可显示英文原文。
我确定这个问题以前发布过，但没有在 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
您必须使用双等号运算符 ( == ) 进行比较，然后将您的代码更改为类似这样的内容
$(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">
我添加了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 。
我在一页上有两个简单的javascript幻灯片显示，但是第二个则停止了第一个工作
[英]I have two simple javascript slideshows on one page but the second one stops the first one working
大家好，我在使此代码正常工作时遇到了一些问题。 问题在于，添加第二个幻灯片会使第一个幻灯片停止工作，当单击以更改第二个幻灯片上的图片时，也会导致第一个幻灯片显示。 这是我第一次尝试任何JavaScript。 两种幻灯片都可以单独运行，我已经对其进行了研究并更改了行document.Lunc ...
如何在第二个自动完成输入中获取特定数据，这取决于在 React.js 中的第一个输入中键入的内容？
[英]How to get a certain data in the second autocomplete input that depend on what typed in the first input in React.js?
好的，所以我不知道如何正确表达我的简单问题，因为它很简单，我猜。 基本上，我在我的 React 项目中完成了一个自动完成功能。我有两个输入“国家”和“城市”。 当我输入一个国家/地区时，我的自动完成功能非常好，可以给我一些建议，但现在我必须为我的第二个输入做同样的事情，所以它会给我一个城市列表，这 ...
在Backbone.js中，对具有两列的集合进行排序，首先是由一列然后是第二列
[英]Sort collection with two columns first by one column and then by the second one in Backbone.js
我需要订购一个具有两列的集合，这两个列都以降序排列，但firt考虑到第一列是第一列，然后是第二列，一个列只是一个标志（0和1），而另一个包含日期，我想以这样显示的方式对数据进行排序 1，5/20/2014 1，5/15/2014 0，5/30/2014 0，5/ ...
谷歌自动完成，第二个输入基于第一个结果
[英]Google autocomplete, second inputs based on first one result
我需要一些关于谷歌自动完成 function 的帮助。 我是后端开发人员，所以我在前端不是很好：D 我有 2 个自动完成输入（取货地址和下货地址）。 我们的工作区在柏林，所以如果用户在柏林地区输入取货地址，则投递地址可以是世界上任何其他地方如果用户在取件输入中输入柏林以外的地址，投递地址只需在柏林地 ...
两个查询，其中第二个查询依赖于第一个查询
[英]Two queries where the second is depended to the first one
我正在尝试在Phonegap（Cordova）应用中显示项目列表，其中每个项目都需要一个额外的查询。 为简单起见，我将以一个例子来解释它。 假设一个student可以有多个course ，一个course可以有很多student （多对多），我想显示一个列表，显示学生注册的课程。 像这 ...
第二个ajax调用不起作用，仅在第一个成功后才应调用第二个
[英]Second ajax call is not working , the second one should be called only after the first one is sucess
我有两个ajax调用，第二个应该仅在第一个ajax成功之后才触发。 每次第一个ajax返回成功，但第二个总是出错。 错误消息：“完成操作错误” ...
将两个变量合并为一个输入属性JS
[英]Combine two variables into one input attribute JS
我有一个输入字段 我试图结合价值属性的地方 我尝试了所有这些，但没有奏效。 如何将 state 和数组 map 中的索引结合起来？ 预期结果：this.state.odds0，其中索引为 0，它调用 state 元素我得到的例子： this.state.odds 设置为 1.5 this.st ...
Mongo：获取两个集合的数据-第二个取决于第一个
[英]Mongo: Get data of two collections - second depending on first one
我尝试显示一篇文章，在该文章的下方，我想显示一些属于该文章的文献数据。 在馆藏文献中有很多文档，但是我想过滤那些具有article_id: article._id文档article_id: article._id 我认为我认为很复杂，但这就是我想要做的： publication.j ...
两组复选框，如果第一个被选中则第二个不能
[英]Two groups of checkboxes, if first one is checked second can not be
我有两个“组”复选框（尽管第一个组仅包含一个复选框），但是如果用户从第一个组中选中了该复选框，我想限制从第二个组中选中该复选框的功能... ...
JS如何使用第一个日期选择器的minDate动态填充第二个日期选择器
[英]JS how to dynamically populate a second date picker with minDate of the first one
如何填充2个日期选择器？ 第二个日期选择器必须至少具有第一个日期选择器的值。这是我现在的代码： ...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.