javascript - 选择 : Combine value of two or more select and get their combination as output

Question

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

<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>