繁体   English   中英

两个自动完成变量,第二个应该依赖于第一个 - Simple JS

[英]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">

我添加了selectchange了代码的方法。

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

问题未解决?试试本站强大的搜索功能,搜索: 两个自动完成变量,第二个应该依赖于第一个 - Simple JS
我在一页上有两个简单的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 (多对多),我想显示一个列表,显示学生注册的课程。 像这 ...

将两个变量合并为一个输入属性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 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2023 STACKOOM.COM