WordPress自定义Select输入框在iPhone上失效（jQuery问题）

问题根源分析 #

1. 自定义模板语法错误：代码中<p>标签的style属性闭合引号书写错误，导致Safari解析DOM异常，直接阻断交互逻辑
2. 旧版本依赖兼容问题：你使用的jQuery 3.3.1和Select2 4.0.5在iOS Safari上存在触摸事件处理的已知bug
3. 核心样式强行覆盖：直接修改Select2默认选择框的高度，可能挤压了点击交互区域，导致触摸无法触发

修复步骤及完整代码 #

1. 修正模板语法错误

将模板中<p>标签的错误闭合引号修正，确保DOM解析正常

2. 更新依赖库版本

替换为最新稳定兼容的jQuery和Select2版本，解决触摸事件兼容问题

3. 优化初始化配置

添加Safari适配的配置项，确保模板函数在所有场景下都返回合法内容

修改后的完整代码：

<div class="wdm-custom-fields">
    <label for="fabric">Fabric:</label>
    <br />
    <select id="id_select2_example" name="Fabric" style="width: 150px;" required>
        <option disabled selected value>Choose a Fabric</option>
        <option data-img_src="https://neyah.ng/wp-content/uploads/2023/02/Multi-coloured-Flowery-Fabric.jpg" value="Multi-coloured Flowery Fabric">Multi-coloured Flowery Fabric</option>
        <option data-img_src="https://neyah.ng/wp-content/uploads/2023/02/Leopard-Print-Fabric.jpg" value="Leopard Print Fabric">Leopard Print Fabric</option>
        <option data-img_src="https://neyah.ng/wp-content/uploads/2023/02/Green-Plain-Fabric.jpg" value="Green Plain Fabric">Green Plain Fabric</option>
        <option data-img_src="https://neyah.ng/wp-content/uploads/2023/02/Gold-and-Black-Print-Fabric--rotated.jpg" value="Gold and Black Print Fabric">Gold and Black Print Fabric</option>
        <option data-img_src="https://neyah.ng/wp-content/uploads/2023/02/Black-Plain-Fabric.jpg" value="Black Plain Fabric">Black Plain Fabric</option>
        <option data-img_src="https://neyah.ng/wp-content/uploads/2023/02/Black-and-Gold-Print-Fabric.jpg" value="Black and Gold Print Fabric">Black and Gold Print Fabric</option>
        <option data-img_src="https://neyah.ng/wp-content/uploads/2023/02/Torquoise-Print-Fabric.jpg" value="Torquoise Print Fabric">Torquoise Print Fabric</option>
        <option data-img_src="https://neyah.ng/wp-content/uploads/2023/02/Teal-Print-Fabric.jpg" value="Teal Print Fabric">Teal Print Fabric</option>
        <option data-img_src="https://neyah.ng/wp-content/uploads/2023/02/Snakeskin-Print-Fabric-rotated.jpg" value="Snakeskin Print Fabric">Snakeskin Print Fabric</option>
        <option data-img_src="https://neyah.ng/wp-content/uploads/2023/02/Red-and-Black-Print-Fabric.jpg" value="Red and Black Print Fabric">Red and Black Print Fabric</option>
        <option data-img_src="https://neyah.ng/wp-content/uploads/2023/02/Nude-Plain-Fabric.jpg" value="Nude Plain Fabric">Nude Plain Fabric</option>
        <option data-img_src="https://neyah.ng/wp-content/uploads/2023/02/Nude-and-Blue-Print-Fabric.jpg" value="Nude and Blue Print Fabric">Nude and Blue Print Fabric</option>
    </select>
</div>

<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
<script type="text/javascript">
    function custom_template(obj) {
        // 处理默认选择项的空元素场景
        if (!obj.element) {
            return obj.text;
        }
        var data = $(obj.element).data();
        var text = $(obj.element).text();
        if (data && data.img_src) {
            return $(`<div><img src="${data.img_src}" style="width:35%;height:200px;padding:20px 0 5px 0;margin:10px 0 0 0;"/><p style="font-weight: 700;font-size:14pt;text-align:left;">${text}</p></div>`);
        }
        // 无图片时返回默认文本，避免DOM异常
        return text;
    }
    var options = {
        templateSelection: custom_template,
        templateResult: custom_template,
        // 指定下拉菜单父容器，修复Safari触摸触发问题
        dropdownParent: $('.wdm-custom-fields'),
        // 禁用搜索框（可选，根据需求调整）
        minimumResultsForSearch: Infinity
    }
    $('#id_select2_example').select2(options);

    // 用自定义类替代直接修改核心样式，避免破坏交互区域
    $('.select2-container--default .select2-selection--single').addClass('custom-select2-height');
</script>

<style>
    .custom-select2-height {
        height: 225px !important;
        display: flex;
        align-items: center;
        padding: 0 10px;
    }
</style>

额外注意事项 #

• 必须引入Select2的CSS文件，之前的代码遗漏了该文件，会导致渲染异常
• 避免给Select2容器添加pointer-events: none这类阻断交互的样式
• 测试前清空浏览器缓存，确保加载最新的依赖库和代码

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