Joomla 1.5 BooKIT组件：CSS nth-of-type无法隐藏下拉选项求助

我有一个基于Joomla 1.5的旧网站，使用BooKIT预订组件。客户要求移除某个预订项目，但找不到配置里的删除入口。所有预订项都展示在一个Select下拉选择框中，找不到这些选项值的配置痕迹，于是尝试用CSS隐藏特定的<option>元素，但代码未生效：

无效的CSS代码（nth-of-type定位失败） #

/* 使用nth-of-type无效 */
select#filter_catid option:nth-of-type(2) {
    display:none !important;
}

已生效的基础CSS（但无法定位特定选项） #

/* 以下CSS已生效，但无法定位到第n个选项 */
select#filter_catid {
    font-size: 2rem !important;
    background-color: #B9B695 !important;
    color: aliceblue !important;
    border: double;
    border-radius: 15px;
    padding: 10px;
    margin-left: 50px;
}

问题原因 #

多数旧浏览器不支持用display:none隐藏<option>元素，加上Joomla 1.5对应的年代浏览器兼容性限制，nth-of-type还可能因为下拉框中存在空选项或<optgroup>分组，导致目标选项的位置判断错误。

可行解决方案 #

1. 优化CSS视觉隐藏（部分浏览器适用）

用visibility:hidden搭配尺寸重置替代display:none，虽然选项仍在下拉列表中，但视觉上不可见且不占空间：

select#filter_catid option:nth-of-type(2) {
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

2. JavaScript直接移除选项（兼容性最好）

通过JS定位并删除目标选项，适合旧网站环境：

// 页面加载完成后执行移除操作
window.onload = function() {
    var selectBox = document.getElementById('filter_catid');
    // 方式1：按索引删除（第2个选项索引为1，因为从0开始计数）
    if (selectBox.options[1]) {
        selectBox.remove(1);
    }
    // 方式2：按选项文本删除（更精准，替换成目标项目的名称）
    // for (var i = 0; i < selectBox.options.length; i++) {
    //     if (selectBox.options[i].text === "需要移除的预订项目名称") {
    //         selectBox.remove(i);
    //         break;
    //     }
    // }
};

将这段代码添加到网站模板的自定义JS文件中，或者直接插入到页面的<script>标签内。

3. 修改组件PHP代码（最彻底）

找到BooKIT组件生成下拉框的PHP文件（通常在components/com_bookit/目录下的视图或模型文件中），找到循环生成<option>的代码，添加判断跳过目标项目：

foreach($items as $item) {
    // 替换为目标项目的ID或名称，跳过生成该选项
    if ($item->id == 123) continue; // 123换成要移除项目的实际ID
    echo '<option value="'.$item->id.'">'.$item->title.'</option>';
}

注意修改前备份文件，避免后续组件更新覆盖修改内容。

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