如何在不重复值的情况下更新搜索框中的值

Question

所以这就是困境。 1.我想使用jquery根据用户在表单中选择的值更新输入框中的值。 2.表单由下拉选项和2个输入框组成。 3.我的代码会将选择框值更新为输入BUT，不断添加值而不是用新选择替换旧值。 4.另外，如何从其他输入中获取值并将它们添加到输入框中的字符串。

为清晰起见，这是一张图片。

这是我试图开始工作的代码，但它继续添加值而不是替换旧代码。

 $('#option2').on("change", function(){ 

    var dropdown = "Option2:" + $(this).val(); //Dropdown selection
    var searchbox = $('#searchbox').val(); //Value of searchbox
    var option3 = $('#option3').val(); //Value of input box 1

    if(option3 === ""){
        $('#searchbox').val(searchbox + " " + dropdown + " " + option3);
    }
    else{
        $('#searchbox').val(searchbox + " " + dropdown);
    }

});

我还想知道如何将其他2个输入框值（option3＆amp; option4）添加到搜索框中，就像在图片中一样，因为使用.on（“更改”，功能）将仅使用下拉选项进行更改。 提前谢谢。

Answer 1

我每次都会构建选项字符串，从#option1，#option2等处读取选项值，而不是重用字符串。然后它自然只包含每个选项的单个值：

＆＃13;

＆＃13;

$(".search-param").on("change", function() {
  var params = $(".search-param")
    .map(function() {
      var $this = $(this);
      var val = $this.val();
      return !val ? undefined : this.id + ":" + val;
    })
    .get()
    .filter(function(v) { return v !== undefined; })
    .join(" ");
  $("#search-params").val(params);
});

＆＃13;

<select id="option1" class="search-param" size="1">
  <option value="">(none)</option>
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>
<select id="option2" class="search-param" size="1">
  <option value="">(none)</option>
  <option>ay</option>
  <option>bee</option>
  <option>see</option>
</select>
<select id="option3" class="search-param" size="1">
  <option value="">(none)</option>
  <option>uno</option>
  <option>due</option>
  <option>tre</option>
</select>
<div>
  Search: <input type="text" id="search-params" size="60">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;