ansaurus

Question

Adding select menu default value via JS?

Answer 1

+2 A:

I have modified the code to use jQuery. It is working fine in IE8, IE8 (Compatibility mode) and in FireFox.

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

<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"&gt;&lt;/script&gt;   

<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>

mohang 2010-06-08 10:44:42

hmm, seems it doesn't work as expected, maybe i made an error while copy/pasting, could you post the whole code to be used?

purpler 2010-06-08 11:09:22

Actually your selected="Web" is working. If you want to change to anything other than the first one, you cand do sel.options[2].selected = true; to change to the third one. This is working for me.

mohang 2010-06-08 11:56:08

really strange, seems i cant get selected="Web" to work..

purpler 2010-06-08 12:07:19

I checked in IE8 and FireFox and IE8 compatibility mode. It is working in all. Check the browser you are using.

mohang 2010-06-08 12:16:54

could you paste the entire code please?

purpler 2010-06-08 12:50:07

Seems i found stupid yet functional solution without modifying JS:<select tabindex="1" name="whichEngine"><option value="Web" selected="selected">Web</option></select>If no search engine is selected, the first one is selected automatically so i took advantage of it and added another option via HTML instead modifying JS which serves just for eyecandy..While this seems to work as expected it's not semantic solution..Could someone suggest another solution perhaps?thanks

purpler 2010-06-08 13:45:54

you have not mentioned your browser name and version. I strongly suggest you switch to jquery. jquery is browser independent and it improves your productivity a lot. If you are interested, I can give you the example using jquery.

mohang 2010-06-09 06:09:47

umm. i used jquery to style the form but not to generate the form option values, if you have jquery example i would like to check it, thanks!

purpler 2010-06-10 08:58:24

I have added the jQuery example. It is working fine in IE8, IE8(compatibility mode) and in FireFox 3.6.

mohang 2010-06-17 10:00:31

Answer 2

A:

You had some errors in how you handle the <select> values and options. I would reorganize your JavaScript like this:

// 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;
}

I would also move your onload handler into the main body of your JavaScript:

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

I also made some changes to your 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>

artlung 2010-06-12 21:41:04

Answer 3

A:

You could specify which egine you would like preselected in the engines array like this:

// 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/"]
];

Then in your setup function:

// 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] );
    }
}

meouw 2010-06-16 13:57:17

interesting, it seems it does work in Firefox but not in other browsers..

purpler 2010-06-16 16:57:54

Answer 4

+5 A:

I appreciate that your question asks for a solution that utilises JavaScript, but having looked at the webpage in question I feel confident in making this point:

Your problem is that you are trying to use JavaScript for something that HTML itself was designed to solve:

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

Fear not, though! You can still access all of the options from JavaScript in the same way that you did before.

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

Please, forgive and listen to me.

icio 2010-06-17 13:02:02

Answer 5

A:

if your only concern is preselecting an engine onload, don't "over-engineer" it.

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);
    }
}

then insert your argument made onto your body tag to a pre-defined variable. If you want something random, create a new function with your equation for selecting a random variable then load your addOptions(function) within your new function. Then remove addOptions from your body tag.

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

Mike Dyer 2010-06-17 20:54:41

ansaurus

tags:

views:

answers:

Adding select menu default value via JS?

related questions