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

时间：2018-04-16 06:45:04

标签： jquery html drop-down-menu

如何从下拉列表中获取文本并使用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完成吗（不要自己重复）？

5 个答案:

答案 0 :(得分：2)

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

＆＃13;
＆＃13; 
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);
}
＆＃13; 
<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" />
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

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

一样

＆＃13;
＆＃13; 
$('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'));
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

选择更改时更新





    <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 :(得分：1)

您的代码非常完美!!

只需在选择下拉列表时调用某个事件

这是我编辑的答案。 通过这个（id）＆amp; 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 :(得分：0)

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

相关问题
最新问题