JScript无法自动选中下拉框中值为“House”的选项求助

我正在开发一个学习用的小型音乐网站，表单提交后页面重载，JS会自动选中之前选择的流派选项以保持搜索状态。通过document.getElementById或jQuery结合PHP变量实现该功能，99.9%的流派选项都能正常自动选中，但唯独值为"House"的选项无法被选中，尝试多种方法均无效。

相关代码 #

下拉框HTML代码 #

<select id='genregrab' name='genre' class='menusmall'>
<optgroup label='Genre'>    
    <option value="">All Genres</option>
    <option value="EDM">EDM</option>
    <option value="DnB">DnB</option>
    <option value="Drum">Drum And Bass</option>
    <option value="Breakbeat">Breakbeat</option>
    <option value="Downtempo">Downtempo</option>
    <option value="Dance">Dance</option>
    <option value="Pop">Pop</option>
    <option value="Disco">Disco</option>
    <option value="Nu-Disco">Nu-Disco</option>
    <option value="House">House</option>            
    <option value="Hard">Hard House</option>
    <option value="Tech">Tech House</option>
    <option value="Techno">Techno</option>
    <option value="Deep">Deep House</option>    
    <option value="Future">Future House</option>
    <option value="Tribal">Tribal House</option>
    <option value="Tropical">Tropical House</option>
    <option value="Progressive">Progressive</option>
    <option value="Bass">Future Bass</option>
    <option value="Bounce">Future Bounce</option>
    <option value="Industrial">Industrial</option>  
    <option value="Electronic">Electronic</option>  
    <option value="Psychedelic">Psychedelic</option>
    <option value="Trance">Trance</option>
    <option value="Psy">Psy Trance</option>
    <option value="Minimal">Minimal</option>
    <option value="Ambient">Ambient</option>    
    <option value="Chillout">Chillout</option>  
    <option value="Synthwave">SynthWave</option>
    <option value="Retro">Retro</option>
    <option value="Hip">Hip-Hop</option>    
    <option value="Trip">Trip-Hop</option>
    <option value="Glitch">Glitch-Hop</option>
    <option value="Rap">Rap</option>    
    <option value="Afrobeat">AfroBeat</option>
    <option value="Grime">Grime</option>
    <option value="Trap">Trap</option>
    <option value="Trapstep">TrapStep</option>
    <option value="Dubstep">DubStep</option>
    <option value="Drumstep">DrumStep</option>
    <option value="Reggea">Reggea</option>
    <option value="RnB">RnB</option>
    <option value="Rock">Rock</option>
    <option value="Metal">Metal</option>
    <option value="Soul">Soul</option>                                                               
    <option value="Country">Country</option>
    <option value="Folk">Folk</option>                                                                  
    <option value="Jazz">Jazz</option>  
    <option value="Blues">Blues</option>
    <option value="Funk">Funk</option>  
    <option value="World">World</option>    
    <option value="Gospel">Gospel</option>  
    <option value="Latin">Latin</option>
    <option value="Ethnic">Ethnic</option>
    <option value="Bollywood">BollyWood</option>
    <option value="Moombahton">Moombahton</option>                                                               
    <option value="Orchestral">Orchestral</option>  
    <option value="Classic">Classical</option>  
    <option value="Cinematic">Cinematic</option>        
</optgroup>
</select>

自动选中的JS代码 #

$(function(){
    var genre = document.getElementById('genregrab');
    var genredata = "<?php echo $genre ?>";
    genre.value=genredata;
});

GET请求处理PHP代码 #

if (isset($_GET['genre'])) {
    $genre=$_GET['genre'];
    $genre = filter_var($genre, FILTER_SANITIZE_STRING);
    $genre = strip_tags($genre);
    $genre = str_replace(['"',"'"], "", $genre);
} else {$genre="";}

MySQL变量处理PHP代码 #

$genre=$row['genre']; 
$genre = str_replace(['"',"'"], "", $genre); 
if ($genre == "null" | $genre==" "){$genre="";}
$genresend = explode(',',trim($genre))[0];

排查与解决思路 #

1. 先确认PHP变量$genre的实际值 #

在JS代码上方添加调试输出，查看$genre的真实内容：

<?php var_dump($genre); ?>

如果输出不是string(5) "House"，说明变量在处理过程中被意外修改。

2. 替换已弃用的FILTER_SANITIZE_STRING #

FILTER_SANITIZE_STRING在PHP 8.1+已被弃用，且可能对某些字符产生意外过滤。替换为更安全的过滤方式：

// 替换原GET处理中的filter_var行
$genre = filter_var($genre, FILTER_SANITIZE_FULL_SPECIAL_CHARS);
// 或者直接使用htmlspecialchars
$genre = htmlspecialchars($genre, ENT_QUOTES, 'UTF-8');

3. 修正MySQL数据处理逻辑 #

现有代码中trim的位置可能导致首尾空格未被处理，调整顺序并优化判断：

$genre = trim($row['genre']); // 先去除首尾空格
$genre = str_replace(['"', "'"], "", $genre);
if ($genre === "null" || empty($genre)) { // 用===严格匹配，empty更可靠
    $genre = "";
}
$genresend = explode(',', $genre)[0];

4. 改用PHP直接生成selected属性（更可靠） #

放弃JS设置，直接在HTML选项中用PHP判断，避免JS加载或匹配问题：

<option value="House" <?php echo ($genre === 'House') ? 'selected' : ''; ?>>House</option>

如果选项较多，建议用循环生成下拉框，避免重复代码：

<?php
$genres = [
    "" => "All Genres",
    "EDM" => "EDM",
    "DnB" => "DnB",
    // ... 其他流派
    "House" => "House",
    // ... 剩余流派
];
?>
<select id='genregrab' name='genre' class='menusmall'>
<optgroup label='Genre'>    
    <?php foreach ($genres as $value => $label): ?>
        <option value="<?php echo htmlspecialchars($value); ?>" <?php echo ($genre === $value) ? 'selected' : ''; ?>>
            <?php echo htmlspecialchars($label); ?>
        </option>
    <?php endforeach; ?>
</optgroup>
</select>

5. 检查JS执行时机与冲突 #

确保JS代码在DOM完全加载后执行，可将其放在</body>标签前，避免DOM未就绪时操作元素。同时检查页面是否有其他脚本修改了#genregrab的值。

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