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

【问题标题】：jquery copy text from select options into another automatically inputjquery将文本从选择选项复制到另一个自动输入
【发布时间】：2017-12-02 15:14:10
【问题描述】：

我想将选择选项中的文本复制到另一个自动输入中，我找到了这个：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

【问题讨论】：

Copy text of a field into another automatically的可能重复

标签： javascript jquery css

【解决方案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">

【讨论】：

你能再试一次吗？我刚刚做了调整。
现在可以工作了，但是它如何只对 id="select_1" id="select_2" id="input_1" 起作用
我不太明白你的问题。你能改写一下吗？
@Geo1313 我想我现在明白了。您能否查看我的更新，看看是否解决了您的问题？
查看我的最新更新。我也提供了一个 jQuery 解决方案。

【解决方案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" >

【讨论】：

可以在没有 onchange="getinput()" 的情况下做同样的事情
如何添加第三个
@Geo1313 ` val=$("#select_1 option:selected").text()+ " "+$("#select_2 option:selected").text()+" "+$ ("#select_3 option:selected").text()`