javascript 两个自动完成变量，第二个应该依赖于第一个-简单JS

uklbhaso 于 2023-01-24 发布在 Java

关注(0)|答案(2)|浏览(172)

我确信这个问题之前已经发布过了，但是在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

JavaScript

来源：https://stackoverflow.com/questions/75204461/two-autocomplete-variables-second-one-should-depend-on-first-one-simple-js

2条答案

按热度按时间

vc9ivgsu1#

您必须使用双等号运算符（==）进行比较，然后将代码更改为如下形式

$(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">

赞(0）回复(0）举报 2023-01-24

bihw5rsg2#

我在代码中添加了select和change方法。
select-你可以在autocomplete中使用select属性来传递选中的值，这里我只是调用函数setAddressValue，它的作用和你之前做的基本相同。
change-select只处理用户从autocomplete-list中实际选择值的情况。如果我手动输入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-case都为真。*，这就是为什么它总是显示最后一个，它通过了所有的if-case。你需要执行==或===来进行比较。
不要使用var。对于不想重新赋值的变量使用const，对于想重新赋值的变量使用let。

赞(0）回复(0）举报 2023-01-24

我来回答

javascript 两个自动完成变量，第二个应该依赖于第一个-简单JS

2条答案

相关问题

热门标签

最新问答