代码之家  ›  专栏  ›  技术社区  ›  Mike Pinkman

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

drop-down-menu html jquery
  •  1
  • Mike Pinkman  · 技术社区  · 6 年前

    如何从下拉列表中获取文本并使用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" 等等这可以用干的(不要重复)来完成吗?

    5 回复  |  直到 6 年前
        1
  •  2
  •   Ankit Agarwal    6 年前

    您可以关联 onchange() 在您的 select 下拉列表和使用 selection.options[selection.selectedIndex].text 使用JavaScript获取所选选项的文本。从那以后,你 id 对于 text 输入使用 身份证件 选择器。在你的情况下 $('#id_lines-0-label') 。此外,由于您有单独的文本输入用于单独的下拉列表,并且您不想重复所有三个下拉列表的代码,因此最好使用 身份证件 下拉列表的。使用此值并连接以获取 身份证件 的 input 盒 

    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" />
        2
  •  1
  •   Novy axtavt    6 年前

    选择更改时更新 

    

    

        <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
  •   Abhijeet Kale    6 年前

    你的代码工作得很完美!!

    只需在选择dropdownlist时调用一些事件,如下所示

    这是我编辑过的答案。 传递此(id)(&索引作为一个参数,并在索引的基础上将文本设置为适当的文本字段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
  •  1
  •   Deepu Reghunath    6 年前

    尝试处理更改事件。在这里,我为选择框使用了一个更改事件。当您更改选择框时,将触发附带事件的函数。此外,如果您希望在页面加载时得到结果,请在页面加载时调用相同的函数,就像我使用 $( 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
  •  0
  •   Mark Gerryl Mirandilla    6 年前 

        <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>
    推荐文章
    Newbie_Coder  ·  如何使用Jquery无画布裁剪框架
    1 年前
    usman610  ·  Javascript代码在点击回车键和点击按钮时删除行
    1 年前
    NovoMannen  ·  导航中的下拉菜单在内容后面重叠
    1 年前
    Carly  ·  在页面加载时滑入div,然后单击以滑入和滑出(jQuery)
    1 年前
    Community wiki  ·  jquery弹出窗口不会用按键关闭,但会点击
    1 年前
    Community wiki  ·  Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?
    1 年前
    Community wiki  ·  无法从jquery文档调用函数
    1 年前
    marzouk najib  ·  Uncaught ReferenceError:未定义FullCalendar
    2 年前
    Pepe  ·  检查“data”属性是否包含输入值的一部分(jQuery)
    2 年前
    laurence keith albano  ·  如何使用Jquery在父类内添加子父类
    2 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号