Добавление выбора меню по умолчанию через JS? - PullRequest
2 голосов
/ 08 июня 2010

Я занимаюсь разработкой веб-сайта мета-поиска, 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>

Ответы [ 5 ]

5 голосов
/ 17 июня 2010

Я ценю, что ваш вопрос требует решения, использующего 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+")");
}

Пожалуйста, прости и послушай меня.

2 голосов
/ 08 июня 2010

Я изменил код для использования 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>
0 голосов
/ 18 июня 2010

, если ваша единственная задача - предварительно выбрать нагрузку двигателя, не «перегружайте» его.

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.

<body onload="addOptions(Web);document.forms.searchForm.searchText.focus()">
0 голосов
/ 16 июня 2010

Вы можете указать, какой двигатель вы хотите предварительно выбрать в массиве двигателей, например:

// 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] );
    }
}
0 голосов
/ 13 июня 2010

У вас были некоторые ошибки при обработке значений и параметров <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...