时间戳

首页 > 解决方案 > 当文本匹配选择时支持输入框

javascript - 当文本匹配选择时支持输入框

问题描述

我有多个下拉菜单，如下所示：

        <select id="filter-race">
            <option>Select Race</option>
            <option>Aqua</option>
            <option>Beast</option>
            <option>Beast-Warrior</option> 
            <option>Creator-God</option>
        </select>

例如，选择其中一个选项会创建一个 url 查询字符串&race=Aqua。

然后在页面加载时检查查询字符串并更改下拉列表：

if(getQueryVariable("race") != undefined){
    if(getQueryVariable("race") == "Aqua"){
        jQuery('#filter-race').prop('selectedIndex',1).trigger("chosen:updated");
    }else if(getQueryVariable("race") == "Beast"){
        jQuery('#filter-race').prop('selectedIndex',2).trigger("chosen:updated");
    }
    else if(getQueryVariable("race") == "Beast-Warrior"){
        jQuery('#filter-race').prop('selectedIndex',3).trigger("chosen:updated");
    }
    else if(getQueryVariable("race") == "Creator-God"){
        jQuery('#filter-race').prop('selectedIndex',4).trigger("chosen:updated");
    }
}

我正在检查我的脚本并清理我几年前创建的许多旧代码。我正在尝试通过简单的匹配来解决更好的方法。

就像是：

if(getQueryVariable("race") != undefined){     
    jQuery('#filter-race').prop('selectedIndex', 'getQueryVariable("race")').trigger("chosen:updated");      
}

我知道这段代码行不通，但这是我想要达到的目标的思考过程。我知道我可能应该使用option valuesselect 但我想知道是否有可能在不影响性能的情况下实现我的要求。

.trigger("chosen:updated");在我使用jQuery Chosen时需要。

标签： javascriptjquery

解决方案

想出了一个比大 if else 匹配链更简单的方法：

//Card Race String Query
if(getQueryVariable("race") != undefined){

    jQuery('#filter-race').val(decodeURI(getQueryVariable("race"))).trigger("chosen:updated");

    if(document.getElementById('filter-race').value == ''){
       jQuery('#filter-race').prop('selectedIndex',0);
    }   

}

第一行将选择下拉框设置为从&race=查询字符串中获取的任何值。

但是，如果这是一个无效值，下拉框将填充空白/空值。所以我通过设置它来跟进它，如果是这种情况，它就是默认值。

推荐阅读