尝试将 SelectBox 下拉菜单与 JQuery 自动完成结合起来

Question

我有一个很好的双层 SelectBox 函数。 例如，它允许您选择“黄金”，然后选择“礼服”。 然后onclick会直接带你到http://website.com/gold/dress 非常好。

<select id="select-id1">
    <option value="" selected="">Please select</option>
    <option value="http://website.com/blue">Blue</option>
    <option value="http://website.com/gold">Gold</option>
</select>

<select id="select-id2">
    <option value="" selected="">Please select</option>
    <option value="/t-shirt">T-Shirt</option>
    <option value="/dress">Dress</option>
</select>

<button onclick="siteRedirect()">GO</button>

<script>
    function siteRedirect() {
        var selectbox = document.getElementById("select-id");
        var selectedValue = selectbox.options[selectbox.selectedIndex].value;
        window.location.href = selectedValue;
    }
</script>

我想要实现的目标（到目前为止没有任何运气）是我希望选择的第二部分（select-id2）成为 JQuery 自动完成。

我使用的是下面的标准代码：

 <script>
  $( function() {
    var availableTags = [
      "T-Shirt",
      "Dress",
      "Skirt",
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>

 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

我不知道花了多少时间来尝试让它发挥作用，因此任何帮助或提示为我指明正确的方向将不胜感激。

我正在有效地尝试转换输入 id =“tags”，以便自动完成中选定的 id 等于我的第一个代码中 (“select-id2”) 的选项值。

Answer 1

我不完全理解你的问题，你能告诉我，你最终需要什么吗？

我明白了这一点：

1. 您在

   #select-id2

中选择“T 恤”
2. 通过

   #select-id2

   中选择的选项，您可以在

   availableTags

中找到selectedIndex
3. 当你获得selectedIndex时，你可以这样做：

   $("#tags").val(availableTags[selectedIndex]).trigger("change");