SELECT：2つ以上の値を組み合わせて選択し、その組み合わせを出力として取得します。

Question

私はこの問題で多忙な日々を抱えています。私は重複と重複と重複がユーザーに依存する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> 

OUTPUTにすべきである：例えば
私はSELECT1 HYDROGENに選択し、SELECT2 OXYGENで
値はH + O

Answer 1

する必要がありますあなたが持っているID select2を持つ2つのselect。そのうちの1つを変更する必要があります。次のことを試してみてください。

$('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はon

（答えはちょうど@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