javascript - 在下拉 Javascript 中更改选定项

Question

我有以下下拉菜单:

<select size="1" name="foo" id="foo" style="cursor: pointer;">
    <option value="bla1;" class=" nAll" selected="1">Requests</option>
    <option value="bla2;" class=" nAll">Requests Rate</option>
</select>

我正在尝试使用以下代码更改选择选项:

      var url = window.location.href;
        var i=1
        var value=getUrlParameter(url);
        $("#foo").find('option').each(function(){
        if(value === i){
            $(this).attr("selected","1");
            }
        else
        {
            $(this).attr("selected","0");    
        }
        i++;
    }
);

基本上我有一个在 URL 中发送的参数，我想在重新加载页面时正确设置下拉菜单。

出于某种原因，这是我运行代码时发生的情况:

<select size="1" name="foo" id="foo" style="cursor: pointer;">
    <option value="bla1;" class=" nAll" selected="selected">Requests</option>
    <option value="bla2;" class=" nAll" selected="selected">Requests Rate</option>
</select>

我希望达到的目标:

<select size="1" name="foo" id="foo" style="cursor: pointer;">
        <option value="bla1;" class=" nAll" selected="0">Requests</option>
        <option value="bla2;" class=" nAll" selected="1">Requests Rate</option>
</select>

Answer 1

传递给getUrlParameter 方法的值应该是一个字符串。但它已作为 url 变量值传递。

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

var url = window.location.href;
var i=1
var value=getUrlParameter("value"); //Change it to variable name in url within double quotes.
$("#foo").find('option').each(function(){
    if(value == i)
    {
        $(this).attr("selected",true);
    }
    else
    {
        $(this).attr("selected",false);    
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select size="1" name="foo" id="foo" style="cursor: pointer;">
    <option value="bla1;" class=" nAll" selected="1">Requests</option>
    <option value="bla2;" class=" nAll">Requests Rate</option>
</select>