Question

我正在开发一个元搜索引擎网站Soogle，我已经使用JS来填充选择菜单..

现在，在加载页面后，默认情况下没有加载任何引擎，用户需要自己选择它或[TAB]来选择..

是否有可能在页面加载后通过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>

Answer 1

我感谢你的问题要求使用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+")");
}

请原谅并听取我的意见。

Answer 2

我修改了代码以使用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>

Answer 3

您在处理<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>

Answer 4

你可以指定你想在引擎数组中预选的哪个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] );
    }
}

Answer 5

如果您唯一关心的是预先选择引擎负载，请不要“过度设计”它。

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（函数）。然后从body标签中删除addOptions。

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

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

5 个答案: