如何将option标签的value值传递给SELECT2插件

没问题，你当前的代码已经能把包含经纬度的value值正确传递给Select2插件了！我帮你优化下代码可读性，再补充后续获取经纬度用于谷歌地图标记的实用代码：

优化后的PHP选项生成代码 #

我调整了代码的可读性和查询效率，只获取需要的数据库字段，用关联数组来处理数据：

<select class="distance" id="start">
    <?php
        include "connect.php";

        // 只查询需要的字段，提升查询效率
        $sql = "SELECT latitude, longitude, branch FROM tblLocation";
        $result = mysqli_query($conn, $sql);

        // 使用fetch_assoc获取关联数组，代码更清晰
        while($row = mysqli_fetch_assoc($result)){
            $latLng = "{$row['latitude']} {$row['longitude']}";
            echo "<option value='{$latLng}'>{$row['branch']}</option>";
        }
        mysqli_close($conn);
    ?>
</select>

Select2初始化脚本 #

你的初始化代码完全没问题，直接保留即可：

$('.distance').select2();

获取选中项的经纬度（用于谷歌地图标记） #

如果之后需要把选中的经纬度提取出来创建谷歌地图标记，可以添加这个Select2的选中事件监听：

$('.distance').on('select2:select', function (e) {
    // Select2中，原生option的value对应data.id属性
    const selectedLatLng = e.params.data.id;
    // 拆分经纬度字符串为单独的数值
    const [latitude, longitude] = selectedLatLng.split(' ');
    
    // 这里就可以用解析后的经纬度创建谷歌地图标记了
    // 示例代码（需要你提前初始化好地图实例）：
    // const marker = new google.maps.Marker({
    //     position: { 
    //         lat: parseFloat(latitude), 
    //         lng: parseFloat(longitude) 
    //     },
    //     map: yourMapInstance, // 替换成你的地图实例变量
    //     title: e.params.data.text // 显示分支名称作为标记标题
    // });
});

几个关键说明： #

• Select2会完整保留原生<option>的value属性值，所以你的初始写法是完全有效的
• 拆分经纬度时要确保数据库中存储的经纬度格式规范，没有多余的空格或无效字符
• 使用fetch_assoc替代fetch_array可以避免获取到冗余的索引数组，让代码更简洁

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