如何将下拉框选中的文本值（而非MySQL ID）传递到输入框？

你的问题出在获取下拉框选中值的方式上——this.value拿到的是选中<option>的value属性（也就是数据库存储的ID），而非它的显示文本。只需修改JavaScript里的取值逻辑即可：

修改后的JavaScript代码 #

$("#sub_category_item").change(function() {
  // 获取选中选项的显示文本
  const selectedText = $(this).find("option:selected").text();
  $("#textArea").val(selectedText);
}).change();

关键说明 #

• $(this).find("option:selected")：定位到当前下拉框中被选中的<option>元素
• .text()：提取该元素的纯文本内容（也就是你看到的"Product 1"这类选项文本）

额外修正：HTML标签错误 #

注意你的HTML里写了<input type="textarea">，这是不符合规范的写法——没有type="textarea"的input类型。根据需求二选一：

1. 若用单行输入框，改为：

<input type="text" class="form-control" id="textArea" name="textarea">

2. 若用多行文本框，改为：

<textarea class="form-control" id="textArea" name="textarea"></textarea>

完整修正后的代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="col-xs-6">
  <div class="form-group">
    <label>Select UPC</label>
    <select name="sub_category_item" id="sub_category_item" class="form-control input-lg" data-live-search="true" title="Select UPC">
    </select>
  </div>
</div>
<div class="col-xs-6">
  <div class="form-group">
    <label>Selected UPC</label>
    <input type="text" class="form-control" id="textArea" name="textarea">
  </div>
</div>

<script>
$("#sub_category_item").change(function() {
  const selectedText = $(this).find("option:selected").text();
  $("#textArea").val(selectedText);
}).change();
</script>

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