如何在Laravel中使用JavaScript更新PHP变量$hasJantan？

我的Laravel代码如下：

PHP代码 #

<?php

use App\Models\petBreedType;

$breeds = petBreedType::all();
$hasJantan = false;

?>

Blade模板代码 #

{{-- {{ dd($hasJantan) }} --}}
<select class="" name="types[]" id="types" multiple>
    <option value="2" {{ in_array('2', old('types', [])) ? 'selected' : '' }} {{ $hasJantan ? 'selected' : '' }}>Anjing</option>
    <option value="1" {{ in_array('1', old('types', [])) ? 'selected' : '' }}>Kucing</option>
</select>

JavaScript代码 #

var url = window.location.href;

function getURLParameters(url) {
var queryString = url.split('?')[1];
if (!queryString) {
    return {};
}

var params = queryString.split('&');
var result = {};

for (var i = 0; i < params.length; i++) {
    var param = params[i].split('=');
    var key = decodeURIComponent(param[0]);
    var value = decodeURIComponent(param[1]);
    
    if (result[key]) {
        if (Array.isArray(result[key])) {
            result[key].push(value);
        } else {
            result[key] = [result[key], value];
        }
    } else {
        result[key] = value;
    }
}
return result;
}

var parameters = getURLParameters(url);
console.log(parameters);
if (parameters['Gender[]'] && parameters['Gender[]'].length === 2) {
    console.log('Gender with two values:', parameters['Gender[]']);
} else {
    console.log('Gender doesn\'t have two value.');
}
var hasJantan = parameters['Gender[]'] && parameters['Gender[]'].includes('Jantan');
var hasJantan = {{ $hasJantan ? 'true' : 'false' }};
console.log(hasJantan);

我想通过JavaScript更新PHP变量$hasJantan，目前控制台中JS的hasJantan输出为true，但在Blade模板中使用dd($hasJantan)仍返回false，该如何解决？

问题原因与解决方案 #

首先必须明确：PHP是服务器端语言，页面发送到浏览器前就已经执行完毕；JavaScript是客户端语言，在浏览器加载页面后才运行。两者运行环境完全分离，你无法用JS修改已经执行过的PHP变量，这是核心问题。

你的实际需求应该是根据URL中的Gender[]参数，自动选中<select>里的Anjing选项，不用纠结修改PHP变量，以下两种方案可以解决：

方案一：服务器端直接处理URL参数（推荐）

在PHP代码中直接读取请求的Gender[]参数，设置$hasJantan，页面渲染时就能直接生效：

<?php
use App\Models\petBreedType;

$breeds = petBreedType::all();
// 从请求中获取Gender参数，默认空数组
$genders = request()->input('Gender', []);
// 判断是否包含Jantan
$hasJantan = in_array('Jantan', $genders);
?>

这样Blade模板中原有的{{ $hasJantan ? 'selected' : '' }}就能正确渲染选中状态，无需依赖JS。

方案二：客户端用JavaScript操作DOM修改选中状态

如果一定要用JS处理，直接跳过PHP变量，找到对应的option元素修改选中状态即可：

var url = window.location.href;

function getURLParameters(url) {
    var queryString = url.split('?')[1];
    if (!queryString) {
        return {};
    }

    var params = queryString.split('&');
    var result = {};
   
    for (var i = 0; i < params.length; i++) {
        var param = params[i].split('=');
        var key = decodeURIComponent(param[0]);
        var value = decodeURIComponent(param[1]);
        
        if (result[key]) {
            if (Array.isArray(result[key])) {
                result[key].push(value);
            } else {
                result[key] = [result[key], value];
            }
        } else {
            result[key] = value;
        }
    }
    return result;
}

var parameters = getURLParameters(url);
// 获取Anjing对应的option元素
var anjingOption = document.querySelector('#types option[value="2"]');
// 判断是否包含Jantan，设置选中状态
var hasJantan = parameters['Gender[]'] && parameters['Gender[]'].includes('Jantan');
anjingOption.selected = hasJantan;
console.log(hasJantan);

同时需要把Blade代码中Anjing选项的{{ $hasJantan ? 'selected' : '' }}移除，避免和JS的操作冲突。

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