从下拉列表中获取文本并使用 JQuery 将其插入输入文本？答案

【问题标题】：Getting the text from dropdown list and Insert it into input text using JQuery?从下拉列表中获取文本并使用 JQuery 将其插入输入文本？
【发布时间】：2018-04-16 16:11:17
【问题描述】：

如何从下拉列表中获取文本并使用 jquery 将其插入到输入文本中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <label class="sr-only control-label" for="id_lines-0-item">
        Item 0:
    </label>
    <select class="form-control" id="id_lines-0-item" name="lines-0-item" title="">
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
    </select>
</div>
<input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />
<div class="form-group">
    <label class="sr-only control-label" for="id_lines-1-item">
        Item 1:
    </label>
    <select class="form-control" id="id_lines-1-item" name="lines-1-item" title="">
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
    </select>
</div>
<input id="id_lines-0-label" maxlength="255" name="lines-1-label" type="text" />
<div class="form-group">
    <label class="sr-only control-label" for="id_lines-2-item">
        Item 2:
    </label>
    <select class="form-control" id="id_lines-2-item" name="lines-2-item" title="">
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
    </select>
</div>
<input id="id_lines-0-label" maxlength="255" name="lines-2-label" type="text" />
<script>
    var label1 = document.getElementById('id_lines-0-item');
    var strlabel1 = label1.options[label1.selectedIndex].text;
    $('input:text').val(strlabel1);
</script>

我已经尝试过上面的代码，但它不起作用，如果这是一个愚蠢的问题，请原谅我，因为我正在学习 jquery。

我更新了我的问题。我需要使用id="id_lines-0-item" 从下拉列表中获取文本并将值设置为使用id="id_lines-0-label" 输入文本并分别使用id="id_lines-1-item" 从下拉列表中获取值并将值设置为使用id="id_lines-1-label" 输入文本等等.这可以使用 DRY（不要重复自己）来完成吗？

【问题讨论】：

标签： jquery html drop-down-menu

【解决方案1】：

您可以在select 下拉列表中关联onchange() 函数，并使用selection.options[selection.selectedIndex].text 通过JavaScript 获取所选选项的文本。因为，text 输入有id，所以最好使用id 选择器。在你的情况下$('#id_lines-0-label')。此外，由于您对单独的下拉菜单有单独的文本输入，并且您不想为所有三个下拉菜单重复代码，因此最好使用下拉菜单的 id 中的数字值。使用此值并连接以获得input 框的id。

function onchangeFn(selection) {
    var id= $(selection).attr('id');
    var num = id.match(/\d+/)[0];
    var strlabel1 = selection.options[selection.selectedIndex].text;
    $('#id_lines-'+num+'-label').val(strlabel1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <label class="sr-only control-label" for="id_lines-0-item">
        Item 0:
    </label>
    <select class="form-control" id="id_lines-0-item" name="lines-0-item" title="" onchange= 'onchangeFn(this)'>
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
    </select>
</div>
<input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />
<div class="form-group">
    <label class="sr-only control-label" for="id_lines-1-item">
        Item 1:
    </label>
    <select class="form-control" id="id_lines-1-item" name="lines-1-item" title="" onchange = 'onchangeFn(this)'>
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
    </select>
</div>
<input id="id_lines-1-label" maxlength="255" name="lines-1-label" type="text" />
<div class="form-group">
    <label class="sr-only control-label" for="id_lines-2-item">
        Item 2:
    </label>
    <select class="form-control" id="id_lines-2-item" name="lines-2-item" title="" onchange = 'onchangeFn(this)'>
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
    </select>
</div>
<input id="id_lines-2-label" maxlength="255" name="lines-2-label" type="text" />

【讨论】：

@MikePinkman 让我知道这是否正是你所期望的

【解决方案2】：

选择更改更新



    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="form-group">
      <label class="sr-only control-label" for="id_lines-0-item">
        Item:
      </label>
      <select class="form-control" id="id_lines-0-item" name="lines-0-item" title="">
        <option value="">---------</option>
        <option value="2">Baja</option>
        <option value="3">Fish</option>
        <option value="4">Tacos</option>
      </select>
    </div>
    <input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />
    <script>

$('select').on('change', function() {
  var strlabel1 =$('#id_lines-0-item option:selected').text();
  $('input:text').val(strlabel1);
})
    </script>

【讨论】：

【解决方案3】：

您的代码完美运行！

只需像这样在选择下拉列表时调用一些事件

这是我编辑的答案。将 this(id) & index 作为参数传递，并在索引的基础上将文本设置为适当的文本字段 id。

希望对你有帮助！！！

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label class="sr-only control-label" for="id_lines-0-item">
    Item:
  </label>
  <select class="form-control" id="id_lines-0-item" name="lines-0-item" title="" onchange="setTest(this,0)">
    <option value="">---------</option>
    <option value="2">Baja</option>
    <option value="3">Fish</option>
    <option value="4">Tacos</option>
  </select>
</div>
<input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />

  <select class="form-control" id="id_lines-1-item" name="lines-1-item" title="" onchange="setTest(this,1)">
    <option value="">---------</option>
    <option value="2">Baja</option>
    <option value="3">Fish</option>
    <option value="4">Tacos</option>
  </select>
</div>
<input id="id_lines-1-label" maxlength="255" name="lines-0-label" type="text" />

  <select class="form-control" id="id_lines-2-item" name="lines-2-item" title="" onchange="setTest(this,2)">
    <option value="">---------</option>
    <option value="2">Baja</option>
    <option value="3">Fish</option>
    <option value="4">Tacos</option>
  </select>
</div>
<input id="id_lines-2-label" maxlength="255" name="lines-0-label" type="text" />
<script>
  function setTest(el,index){
   var label1 = $(el).val();
   var strlabel1 = label1.options[label1.selectedIndex].text;
    if(index == 0)     
      $('#id_lines-0-label').val(strlabel1);
    else if(index == 1)
      $('#id_lines-1-label').val(strlabel1);
    else if(index == 2)
      $('#id_lines-2-label').val(strlabel1);

   }
</script>

【讨论】：

【解决方案4】：

尝试处理 on change 事件。在这里，我对选择框使用了更改事件。当您对选择框进行更改时，将触发附带事件的功能。而且，如果您想要页面加载的结果，请在页面加载时调用相同的函数函数，就像我使用 $( document ).ready(function() {});

$('select').on('change', function() {
   updateValue($(this));
});

function updateValue(ele){   
    ele.closest('.form-group').find('input').val($("option:selected", ele).text());
}
$( document ).ready(function() {
    updateValue($('#id_lines-0-item'));   
    updateValue($('#id_lines-1-item'));
    updateValue($('#id_lines-2-item'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label class="sr-only control-label" for="id_lines-0-item">
    Item:
  </label>
  <select class="form-control" id="id_lines-0-item" name="lines-0-item" title="">
    <option value="">---------</option>
    <option value="2">Baja</option>
    <option value="3">Fish</option>
    <option value="4">Tacos</option>
  </select>
  <input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />
</div>
<div class="form-group">
  <label class="sr-only control-label" for="id_lines-0-item">
    Item:
  </label>
  <select class="form-control" id="id_lines-1-item" name="lines-0-item" title="">
    <option value="">---------</option>
    <option value="2">Baja</option>
    <option value="3">Fish</option>
    <option value="4">Tacos</option>
  </select>
  <input id="id_lines-1-label" maxlength="255" name="lines-1-label" type="text" />
</div>
<div class="form-group">
  <label class="sr-only control-label" for="id_lines-1-item">
    Item:
  </label>
  <select class="form-control" id="id_lines-2-item" name="lines-2-item" title="">
    <option value="">---------</option>
    <option value="2">Baja</option>
    <option value="3">Fish</option>
    <option value="4">Tacos</option>
  </select>
  <input id="id_lines-2-label" maxlength="255" name="lines-2-label" type="text" />
</div>

【讨论】：

【解决方案5】：

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


    <div class="form-group">
          <label class="sr-only control-label" for="id_lines-0-item">
            Item:
          </label>
          <select class="form-control" id="id_lines-0-item" name="lines-0-item" title="">
            <option value="">---------</option>
            <option value="2">Baja</option>
            <option value="3">Fish</option>
            <option value="4">Tacos</option>
          </select>

<input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />
        </div>

<div class="form-group">
          <label class="sr-only control-label" for="id_lines-0-item">
            Item:
          </label>
          <select class="form-control" id="id_lines-0-item" name="lines-0-item" title="">
            <option value="">---------</option>
            <option value="2">Baja</option>
            <option value="3">Fish</option>
            <option value="4">Tacos</option>
          </select>

<input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />
        </div>

<div class="form-group">
          <label class="sr-only control-label" for="id_lines-0-item">
            Item:
          </label>
          <select class="form-control" id="id_lines-0-item" name="lines-0-item" title="">
            <option value="">---------</option>
            <option value="2">Baja</option>
            <option value="3">Fish</option>
            <option value="4">Tacos</option>
          </select>

<input id="id_lines-0-label" maxlength="255" name="lines-0-label" type="text" />
        </div>
    
    <script>
      $(document).ready(function(){

$('select option').click(function(){

$(this).closest('.form-group').find('input').val($(this).text());
});
});
    </script>

【讨论】：