移动端Select Option显示异常及JS同步功能失效求助

问题现状 #

• 桌面端：设置size="5"的Select框正常展示所有选项，选中选项后JS能同步更新service selected只读字段，符合预期。
• 移动端：Select框虽设置size="5"，但初始显示为空，点击后弹出系统选项弹窗；选中选项后Select框自身更新，但service selected字段未同步更新，导致依赖该字段的PHP提交逻辑失效，目前只能临时隐藏移动端表单。

现有代码片段 #

选项区域HTML #

<input type="radio" id="fees-section-type-ident-f" class="form-radio-input item3 expand3" name="feesType" value="Identity Confirmation" onclick="serviceSelection('ident')" <?php if (isset($_POST["feesType"]) && $_POST["feesType"] == 'Identity Confirmation') {echo 'checked="checked"';} ?> />
<label class="form-label form-radio-label item3" id="fees-section-type-ident-l" for="fees-section-type-ident-f">Identity Confirmation</label>
<select class="form-control form-field service-selection expanded3"id="fees-section-type-ident-options-l" name="identOptions" size="5">
  <option class="service-option-item" tabindex="0" onchange="serviceSelected()" name="identreg" value="30">£30 - Confirmation of registration</option>
  <option class="service-option-item" tabindex="0" onchange="serviceSelected()" name="identaddress" value="30">£30 - Confirmation of address</option>
</select>

目标字段HTML #

<div class="radio-checkbox-column-one field-group-h-11">
  <label class="form-label field-label" id="fees-service-selected-l" for="fees-service-selected-f">Service selected:</label>
  <input class="form-control form-field" id="fees-service-selected-f" type="text" name="serviceSelected" value="<?php if(!empty($_POST["serviceSelected"])) {echo $serviceSelected;} ?>" readonly="readonly" />
</div>

JavaScript逻辑 #

//clear previous selections when changing radio button
function serviceSelection(radioid)
{
    var serviceType = document.getElementsByClassName('service-option-item');
    for (var i = 0; i < serviceType.length; i++) {
    serviceType[i].selected=0;
    }
}

function serviceSelected()
{
    var serviceItem = document.getElementsByClassName('service-option-item');
    for (var i = 0; i < serviceItem.length; i++) {
        if (serviceItem[i].selected) {
            //get the text value from the service selected
            var service = serviceItem[i].text;
            //update the service choice with the service text
            var choice = document.getElementById('fees-service-selected-f');
            choice.text = service; //testing
        }
    }   
}

问题根源分析 #

1. 事件绑定错误：将onchange绑定在<option>元素上，而移动端系统选择弹窗触发的是<select>元素的change事件，而非单个<option>，导致serviceSelected()函数无法被触发。
2. DOM元素赋值错误：更新只读输入框时使用了choice.text = service，但文本输入框的内容应该通过value属性设置，这也会导致桌面端存在隐性问题。
3. Select控件移动端适配：移动端浏览器会自动将size>1的Select转为弹窗式选择器，这是浏览器默认行为，无需强行改变，但需要保证事件逻辑兼容。

修复方案 #

步骤1：修正事件绑定 #

移除<option>上的onchange事件，将onchange绑定到<select>元素上：

<select class="form-control form-field service-selection expanded3" id="fees-section-type-ident-options-l" name="identOptions" size="5" onchange="serviceSelected(event)">
  <option class="service-option-item" tabindex="0" name="identreg" value="30">£30 - Confirmation of registration</option>
  <option class="service-option-item" tabindex="0" name="identaddress" value="30">£30 - Confirmation of address</option>
</select>

步骤2：修正JS赋值逻辑 #

修改serviceSelected()函数，优化选中项获取逻辑并修正输入框赋值方式：

function serviceSelected(event) {
    // 获取触发事件的select元素
    const selectEl = event.target;
    // 获取选中的option文本
    const selectedText = selectEl.options[selectEl.selectedIndex].text;
    // 更新目标输入框的value属性
    document.getElementById('fees-service-selected-f').value = selectedText;
}

步骤3：优化单选框清除逻辑（可选） #

原函数遍历所有service-option-item，可改为针对当前单选框关联的Select控件清除选中状态，避免影响其他控件：

function serviceSelection(radioid) {
    // 根据radioid找到对应的select控件
    const selectEl = document.getElementById(`fees-section-type-${radioid}-options-l`);
    if (selectEl) {
        selectEl.selectedIndex = -1;
        // 同步清空service selected字段
        document.getElementById('fees-service-selected-f').value = '';
    }
}

步骤4：兼容移动端默认行为 #

移动端将Select转为弹窗是浏览器默认处理，无需修改，上述事件绑定修正后即可适配该行为，确保选中后触发serviceSelected()函数。

验证要点 #

• 桌面端：Select框正常展示所有选项，选中后service selected字段同步更新。
• 移动端：点击Select弹出选项弹窗，选中后service selected字段同步更新，表单提交逻辑正常。

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