javascript - jquery 将选择选项中的文本复制到另一个自动输入中

Question

我想将选择选项中的文本复制到另一个自动输入中，我找到了这个:http://jsfiddle.net/6khr8e2b/ 但我无法更改它。

我想这样做:

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

我将有两个选择和一个输入当我选择 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">