SELECT：组合两个或多个选择的值并将它们的组合作为输出

Question

我有很多天在谷歌上搜索这个问题，但我一无所获。我需要创建一个 DUPLICATE 和 DUPLICATE 和 DUPLICATE 取决于用户的 SELECT。之后，我需要在我选择的选择中组合每个选项的值。我希望我在这里得到了答案。以下代码如下：

<button name="duplicateselect" class="btn btn-primary">ADD ANOTHER SELECT</button>

<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <label for="select1">ELEMENT 1</label>
      <select class="form-control" name="select2" id="select2">
        <option value="H">HYDORGEN</option>
        <option value="O">OXYGEN</option>
        <option value="K">POTASSIUM</option>
      </select>
    </div>
  </div>
  <div class="col-lg-12">
    <div class="form-group">
      <label for="select2">ELEMENT 2</label>
      <select class="form-control" name="select2" id="select2">
        <option value="H">HYDORGEN</option>
        <option value="O">OXYGEN</option>
        <option value="K">POTASSIUM</option>
      </select>
    </div>
  </div>
  <input type="text" class="form-control" placeholder="Combination Here" name="combination" id="combination">
</div>

输出应该是：
例如我选择了 select1 HYDROGEN 和 select2 OXYGEN
值应该是 H + O

Answer 1

您有两个select，ID 为select2。您需要更改其中之一。请尝试以下操作：

$('input[name=duplicateselect').click(function(){
    var sel1 = $('#select2 option:selected').val();
    var sel2 = $('#select3 option:selected').val();
    $('#combination').val(sel1+' + '+sel2)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" name="duplicateselect" class="btn btn-primary">
<div class="row">
  <div class="col-lg-12">
    <div class="form-group">
      <label for="select1">ELEMENT 1</label>
      <select class="form-control" name="select2" id="select2">
        <option value="H">HYDORGEN</option>
        <option value="O">OXYGEN</option>
        <option value="K">POTASSIUM</option>
      </select>
    </div>
  </div>
  <div class="col-lg-12">
    <div class="form-group">
      <label for="select2">ELEMENT 2</label>
      <select class="form-control" name="select2" id="select3">
        <option value="H">HYDORGEN</option>
        <option value="O">OXYGEN</option>
        <option value="K">POTASSIUM</option>
      </select>
    </div>
  </div>
  <input type="text" class="form-control" placeholder="Combination Here" name="combination" id="combination">
</div>

Answer 2

这需要一些简单的 javascript（或 jQuery）。根据您希望它的行为方式，有几个选项：

A) 将 onchange 事件处理程序添加到选择框。当它们中的任何一个发生变化时，取出值并将其弹出到组合框中

B) 为执行相同操作的表单添加 obsubmit 事件处理程序 - 这里最终的#combination 只会在提交时填充，而不是在更改时填充

（正如@mamun 刚刚弹出的答案，我不会费心重新输入代码！）

Answer 3

$('select').on('change', function(){
  var s = '';
  $('select').each(function(){
    if(s == '') {
      s = $(this).val();
    } else {
      s = s + ' + ' + $(this).val() ;  
    }
  })
  $('#combination').val(s);
})

https://codepen.io/SESN/pen/bqyexN?editors=1111