求助：使用jQuery实现点击下拉选项后将值显示至输入框

原代码存在的问题 #

• 循环生成的所有<li>重复使用id="selectboxes"，HTML中id是唯一标识，重复id会导致jQuery选择器无法正确定位目标元素。
• optionselect函数逻辑冗余：明明已经通过参数接收了选中值，却重复通过无效的id选择器取值，且因id重复会导致取值错误。
• 输入框HTML代码不完整，缺少闭合标签和与JS选择器匹配的id属性。

修正后的完整代码 #

HTML部分

<div class="wrapper-dropdown" id="primary_destination">
    <span>Primary Destination</span>
    <ul class="dropdown">
        @foreach(DB::table('formcountries')->get() as $r)
            <li data-v-6e3bf6e8="{{ $r->code }}" data-title="{{ $r->name }}" data-value="{{ $r->name }}" class="optionselect">
                <span class="selectspan">{{ $r->name }}</span>
            </li>
        @endforeach
    </ul>
</div>
<input data-v-5170d561="" type="text" placeholder="Destination" id="testfield2" />

jQuery代码

$(function() {
    // 用事件委托绑定点击事件，替代内联onclick，更易维护
    $('.dropdown').on('click', '.optionselect', function() {
        // 获取当前点击选项的值
        var selectedValue = $(this).data('value');
        // 将值赋值到目标输入框
        $('#testfield2').val(selectedValue);
    });
});

说明 #

1. 移除重复id，改用data-value存储选项值，语义更清晰且符合HTML规范。
2. 使用jQuery事件委托绑定点击事件，避免内联事件绑定，代码结构更整洁。
3. 补全输入框HTML代码，确保id与JS选择器完全对应。

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