jquery从选择选项复制文本到另一个自动输入

Question

我希望从选择的选项中复制文本到另一个自动输入，我发现这个：<select > <option value="0">AAAA</option> <option value="1">BBBB</option> </select> <select > <option value="0">CCCC</option> <option value="1">DDDD</option> </select> <input type="text" > 但我无法改变它。

我想这样做：

Tuple<string,int> tpl = new Tuple<string,int>("",0);

List<Tuple> lst = new List<Tuple>();

我将有两个选择和一个输入 当我选择选择AAAA和DDDD时，我希望输入值自动输入：AAAA DDDD

Answer 1

Javascript解决方案

const selects = document.querySelectorAll('#select_1, #select_2');

const selectOne = selects[0];
const selectTwo = selects[1];

const input = document.getElementById('input_1');

Array.from(selects).forEach(select => {
  select.addEventListener('change', () => {
    input.value = `${selectOne.options[selectOne.selectedIndex].textContent} ${selectTwo.options[selectTwo.selectedIndex].textContent}`;
  });
});

<select id="select_1">
  <option value="0">AAAA</option>
  <option value="1">BBBB</option>
</select>

<select id="select_2">
  <option value="0">CCCC</option>
  <option value="1">DDDD</option>
</select>

<input id="input_1" type="text">

jQuery解决方案

$(function() {
  const $selects = $('#select_1, #select_2');
  
  const $selectOne = $selects.eq(0);
  const $selectTwo = $selects.eq(1);

  const $input = $('#input_1');

  $selects.on('change', () => {
    $input.val(`${$selectOne.find(':selected').text()} ${$selectTwo.find(':selected').text()}`);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="select_1">
  <option value="0">AAAA</option>
  <option value="1">BBBB</option>
</select>

<select id="select_2">
  <option value="0">CCCC</option>
  <option value="1">DDDD</option>
</select>

<input id="input_1" type="text">

Answer 2

它对你有帮助

function getinput(){

var val="";
val=$("#select_1 option:selected").text()+ " "+$("#select_2 option:selected").text()
$("#input_1").val(val);
}
$(function(){
   $(".select").change(function(){
      var val="";
      val=$("#select_1 option:selected").text()+ " "+$("#select_2 option:selected").text()
      $("#input_1").val(val);

   });
    $(".select").trigger("change");
})

select{
width:150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select  class="select"  id="select_1">
<option value="0">AAAA</option>
<option value="1">BBBB</option>
</select>

<select class="select" id="select_2">
<option value="0">CCCC</option>
<option value="1">DDDD</option>
</select>

<input type="text" id="input_1" >