页面加载时从PHP获取数据，能否使用Option()构造器构建下拉选项？

不用改用AJAX加载，直接通过后端转义或前端原生构造就能解决，以下是几种可行方案：

方案1：使用Blade内置转义函数e() #

Blade的e()辅助函数会自动将特殊字符转换为HTML实体，包括单引号、双引号，彻底避免破坏HTML结构：

<select>
    @foreach($data as $row)
        <option value="{{ e($row->value) }}">{{ e($row->value) }}</option>
    @endforeach
</select>

方案2：使用htmlspecialchars()指定转义引号 #

直接调用PHP原生函数，通过ENT_QUOTES参数同时转义单双引号，效果和e()一致：

<select>
    @foreach($data as $row)
        <option value="{{ htmlspecialchars($row->value, ENT_QUOTES) }}">{{ htmlspecialchars($row->value) }}</option>
    @endforeach
</select>

方案3：前端用Option构造器渲染（无需AJAX） #

把后端数据转成JSON输出到页面，前端循环创建Option元素，JSON会自动处理引号的转义：

<select id="target-select"></select>

<script>
    // 后端直接输出JSON格式数据
    const optionList = {!! json_encode($data) !!};
    const selectEl = document.getElementById('target-select');
    
    optionList.forEach(item => {
        // 用Option构造器创建选项，自动处理引号问题
        const option = new Option(item.value, item.value);
        selectEl.appendChild(option);
    });
</script>

以上方案都不需要额外发起AJAX请求，直接在页面首次渲染时就能解决引号导致的HTML异常问题。

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