代码之家 › 专栏 › 技术社区 › dzhi

通过JS添加选择菜单默认值?

forms javascript

dzhi · 技术社区 · 14 年前

我正在开发一个元搜索引擎网站, Soogle 我用JS来填充选择菜单。

现在,在加载页面后,默认情况下不加载任何引擎,用户需要自己选择它或[选项卡]选择它。

页面加载后,是否可以通过JS从菜单中预先选择一个值?

这是代码:

Javascript:

// SEARCH FORM INIT
function addOptions(){
    var sel=document.searchForm.whichEngine;
    for(var i=0,l=arr.length;i<l;i++){
        sel.options[i]=new Option(arr[i][0], i);
    }
}

function startSearch(){
    var searchString=document.searchForm.searchText.value;
    if(searchString.replace(/\s+/g,"").length > 0){
        var searchEngine=document.searchForm.whichEngine.selectedIndex,
            finalSearchString=arr[searchEngine][1]+searchString;
        window.location=finalSearchString;
    }
    return false;
}
function checkKey(e){
    var key = e.which ? e.which : event.keyCode;
    if(key === 13){
        return startSearch();
    }
}

// SEARCH ENGINES INIT
var arr = [
    ["Web", "http://www.google.com/search?q="],
    ["Images", "http://images.google.com/images?q="],
    ["Knowledge","http://en.wikipedia.org/wiki/Special:Search?search="],
    ["Videos","http://www.youtube.com/results?search_query="],
    ["Movies", "http://www.imdb.com/find?q="],
    ["Torrents", "http://thepiratebay.org/search/"]
];

HTML:

<body onload="addOptions();document.forms.searchForm.searchText.focus()">

<div id="wrapper">
<div id="logo"></div>

<form name="searchForm" method="POST" action="javascript:void(0)">
<input name="searchText" type="text" onkeypress="checkKey(event);"/>
<span id="color"></span>
<select tabindex="1" name="whichEngine" selected="Web"></select>
<br />
<input tabindex="2" type="button" onClick="return startSearch()" value="Search"/>
</form>
</div>

</body>

5 回复 | 直到 14 年前

icio 14 年前

我很感谢您的问题要求使用javascript的解决方案,但在查看了相关网页后,我有信心提出这一点:

您的问题是,您正试图将javascript用于HTML本身旨在解决的问题:

<select name="whichEngine">
    <option value="http://www.google.com/search?q=" selected="selected">Web</option>
    <option value="http://images.google.com/images?q=">Images</option>
    <option value="http://en.wikipedia.org/wiki/Special:Search?search=">Knowledge</option>
    <option value="http://www.youtube.com/results?search_query=">Videos</option>
    <option value="http://www.imdb.com/find?q=">Movies</option>
    <option value="http://thepiratebay.org/search/">Torrents</option>
</select>

不要害怕 尽管如此!您仍然可以像以前一样从JavaScript访问所有选项。

function alertSelectedEngine() {
    var e = document.getElementsByName("whichEngine")[0];
    alert("The user has selected: "+e.options[e.selectedIndex].text+" ("+e.options[e.selectedIndex].value+")");
}

请原谅我,听我说。

dotcoder 14 年前

我已经将代码修改为使用jquery。它在IE8、IE8(兼容模式)和Firefox中工作正常。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Index</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>   

<script type="text/javascript">

    // SEARCH ENGINES INIT
    var arr = new Array();
    arr[arr.length] = new Array("Web", "http://www.google.com/search?q=");
    arr[arr.length] = new Array("Images", "http://images.google.com/images?q=");
    arr[arr.length] = new Array("Knoweledge", "http://en.wikipedia.org/wiki/Special:Search?search=");
    arr[arr.length] = new Array("Videos", "http://www.youtube.com/results?search_query=");
    arr[arr.length] = new Array("Movies", "http://www.imdb.com/find?q=");
    arr[arr.length] = new Array("Torrents", "http://thepiratebay.org/search/");

    // SEARCH FORM INIT
    function addOptions() {

        // Add the options to the select dropdown.
        var nOptions = arr.length;
        var optionText = '';
        for (var i = 0; i < nOptions; i++) {
            optionText += '<option value="' + i + '">' + arr[i][0] + '</option>'
        }

        //alert('optionText = ' + optionText);
        // Add the options to the select drop down.
        $('select#whichEngine').html(optionText);

        // set the second option as default. This can be changed, if required.
        $('select#whichEngine option:eq(1)').attr('selected', true);

    }

    function startSearch() {
        var searchEngineIndex = $('select#whichEngine option:selected').attr('value');
        searchEngineIndex = parseInt(searchEngineIndex, 10);

        var searchString = $('input#searchText').val();

        if (searchEngineIndex >= 0 && searchString) {
            var searchURL = arr[searchEngineIndex][1] + searchString;

            //alert('location = ' + searchURL);

            window.location.href = searchURL;
        }

        return false;
    }
    function checkKey(e) {
        var character = (e.which) ? e.which : event.keyCode;

        if (character == '13') {
            return startSearch();
        }
    }

    $(function() {
        // Add the options to the select drop down.
        addOptions();

        // Add focus to the search text box.
        $('input#searchText').focus();

        // Hook the click event handler to the search button.
        $('input[type=button]').click(startSearch);

        $('input#searchText').keyup(checkKey);

    });



</script>

</head>
<body>

    <div id="wrapper">
        <div id="logo"></div>

        <form name="searchForm" method="POST" action="javascript:void(0)">
            <input id="searchText" name="searchText" type="text"/>
            <span id="color"></span>

            <select tabindex="1" id="whichEngine" name="whichEngine"></select>
            <br />
            <input tabindex="2" type="button"value="Search"/>
        </form>
    </div>

</body>
</html>

artlung 14 年前

您在处理 <select> 值和选项。我会像这样重新组织您的javascript:

// SEARCH ENGINES
var arr = [["Web", "http://www.google.com/search?q="],
    ["Images", "http://images.google.com/images?q="],
    ["Knowledge", "http://en.wikipedia.org/wiki/Special:Search?search="],
    ["Videos", "http://www.youtube.com/results?search_query="],
    ["Movies", "http://www.imdb.com/find?q="],
    ["Torrents", "http://thepiratebay.org/search/"]];

// SEARCH FORM INIT
function addOptions(){
    var sel=document.searchForm.whichEngine;
    for(var i=0;i<arr.length;i++) {
        sel.options[i]=new Option(arr[i][0],arr[i][1]);
    }
}

function startSearch(){
    var searchString = document.searchForm.searchText.value;
    if(searchString!==''){
        var mySel = document.searchForm.whichEngine;
        var finalLocation = mySel.options[mySel.selectedIndex].value;
        finalLocation += encodeURIComponent(searchString);
        location.href = finalLocation;
    }
    return false;
}

function checkKey(e){
    var character=(e.which) ? e.which : event.keyCode;
    return (character=='13') ? startSearch() : null;
}

我也会把你的 onload javascript主体中的处理程序:

window.onload = function() {
    addOptions();
    document.searchForm.searchText.focus();
};

我还对您的HTML进行了一些更改:

<body>
<div id="wrapper">
    <div id="logo"></div>
    <form name="searchForm" method="POST" action="." onsubmit="return false;">
        <input name="searchText" type="text" onkeypress="checkKey(event);" />
        <span id="color"></span>
        <select tabindex="1" name="whichEngine" selected="Web"></select><br />
        <input tabindex="2" type="button" value="Search"
            onclick="startSearch();" />
    </form>
</div>
</body>

meouw 14 年前

您可以这样指定要在引擎数组中预选的egine:

// SEARCH ENGINES INIT
// I've used array literals for brevity
var arr = [
    ["Web", "http://www.google.com/search?q="],
    ["Images", "http://images.google.com/images?q="],
    ["Knoweledge", "http://en.wikipedia.org/wiki/Special:Search?search="],
    /*
     * notice that this next line has an extra element which is set to true
     * this is my default
     */
    ["Videos", "http://www.youtube.com/results?search_query=", true],
    ["Movies", "http://www.imdb.com/find?q="],
    ["Torrents", "http://thepiratebay.org/search/"]
];

然后在设置功能中:

// SEARCH FORM INIT
function addOptions() {
    var sel = document.searchForm.whichEngine;
    for (var i = 0; i < arr.length; i++) {
        // notice the extra third argument to the Option constructor
        sel.options[i] = new Option( arr[i][0], i, arr[i][2] );
    }
}

listenrightmeow 14 年前

如果您唯一关心的是预先选择一个发动机加载,不要“过度工程”它。

var Web = "http://www.google.com/search?q=";
var Images = "http://images.google.com/images?q=";
var Knowledge = "http://en.wikipedia.org/wiki/Special:Search?search=";
var Videos = "http://www.youtube.com/results?search_query=";
var Movies = "http://www.imdb.com/find?q=";
var Torrents = "http://thepiratebay.org/search/";

function addOptions(source){
    var sel=document.searchForm.whichEngine;
    for(var i=0,l=arr.length;i<l;i++){
        sel.options[i]=new Option(arr[i][0], i);
    }
}

然后将您在body标签上的参数插入到一个预定义的变量中。如果你想要随机的东西,用你的公式创建一个新的函数来选择一个随机变量,然后把你的addoptions(函数)加载到你的新函数中。然后从您的身体标签中删除addoptions。

<body onload="addOptions(Web);document.forms.searchForm.searchText.focus()">