如何使用jQuery获取下拉列表文本并插入至输入文本框

嘿，这事儿其实没那么复杂，我给你捋清楚怎么实现哈～

首先，咱们得先确保页面里有目标输入文本框（你的代码里只给了下拉框，我给你补全一下结构），然后通过监听下拉框的选择事件，把选中的文本塞到输入框里就行。

完整代码示例 #

HTML部分（包含下拉框和输入框）

<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">Taco</option>
    <option value="4">Burrito</option>
  </select>
  <!-- 新增的目标输入文本框 -->
  <input type="text" id="target-input" class="form-control mt-2" placeholder="选中的文本会显示在这里">
</div>

jQuery部分

$(document).ready(function() {
  // 监听下拉框的change事件（用户切换选项时触发）
  $("#id_lines-0-item").change(function() {
    // 获取选中选项的文本内容
    const selectedText = $(this).find("option:selected").text();
    // 将文本插入到目标输入框中
    $("#target-input").val(selectedText);
    
    // 可选：如果不想把空的"---------"文本放进去，可以加个判断
    // if (selectedText.trim() !== "---------") {
    //   $("#target-input").val(selectedText);
    // }
  });
});

关键代码解释 #

• $(document).ready(function() { ... })：确保页面DOM加载完成后再执行jQuery代码，避免出现找不到元素的问题。
• $("#id_lines-0-item").change(...)：给下拉框绑定change事件，用户切换选项时自动触发回调函数。
• $(this).find("option:selected").text()：$(this)指代当前触发事件的下拉框，option:selected定位到当前被选中的选项，.text()专门获取该选项的文本内容（不是value属性值哦）。
• $("#target-input").val(selectedText)：把获取到的文本设置为输入框的内容。

如果你的输入框ID不一样，记得把#target-input改成你实际的输入框ID就行～

内容的提问来源于stack exchange，提问作者Mike Pinkman