jQuery 實現下拉選單點擊選項回填輸入框

需求：點擊 `

` 中的 `
• 選項
`，將文字回填至 ``。核心是事件委派 + 文字取值。

最簡實現

<div class="input-group">
  <input type="text" class="form-control" id="targetInput" readonly />
  <div class="input-group-btn">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">選項一</a></li>
      <li><a href="#">選項二</a></li>
      <li><a href="#">其他</a></li>
    </ul>
  </div>
</div>

<script>
$(function () {
  // 事件委派：針對動態生成的 li 也生效
  $('.dropdown-menu').on('click', 'li a', function (e) {
    e.preventDefault();           // 阻止 # 跳轉
    var text = $(this).text();    // 取得顯示文字
    $('#targetInput').val(text);  // 回填輸入框
    $(this).closest('.dropdown-menu').dropdown('toggle'); // 可選：關閉下拉
  });
});
</script>

進階：同步隱藏值

<input type="hidden" name="selectedValue" id="hiddenVal" />

$('.dropdown-menu').on('click', 'li a', function (e) {
  e.preventDefault();
  var text = $(this).text();
  var val  = $(this).data('value') || text; // 支援 data-value 屬性
  $('#targetInput').val(text);
  $('#hiddenVal').val(val); // 表單提交時攜帶真實值
});

• HTML：`
• 選項一
`

注意點

• 輸入框加 readonly 防止手動輸入破壞資料一致性。
• 使用 .on('click', 'li a', ...) 事件委派，支援 AJAX 動態載入選單。
• Bootstrap 4/5 需將 data-toggle="dropdown" 改為 data-bs-toggle="dropdown"，JS 呼叫 dropdown('toggle') 同理。

此法零依賴額外外掛，幾行代碼即可完成下拉回填常見需求。