通過JS添加選擇菜單默認值？

我正在開發一個元搜索引擎網站，Soogle和我用JS來填充選擇菜單..通過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>

來源

2010-06-08 dzhi

我明白你的問題問的是利用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+")"); 
}

請原諒，聽我說。

來源

2010-06-17 13:02:02 icio

我已經修改使用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>

來源

2010-06-08 10:44:42 mohang

嗯，它似乎沒有按預期工作，也許我複製/粘貼時發生錯誤，你可以發佈整個代碼來使用？ – dzhi 2010-06-08 11:09:22

其實你的選擇=「網絡」正在工作。如果你想改變爲第一個以外的任何東西，你可以選擇sel.options [2] .selected = true;改爲第三個。這對我有用。 – mohang 2010-06-08 11:56:08

真的很奇怪，似乎我無法獲得選擇=「網絡」的工作.. – dzhi 2010-06-08 12:07:19

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

來源

2010-06-12 21:41:04 artlung

您可以指定您希望在引擎數組中如何預先選擇哪個範圍：

在你的設置功能

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

來源

2010-06-16 13:57:17 meouw

有趣，它似乎在Firefox中工作，但在其他瀏覽器中沒有。 – dzhi 2010-06-16 16:57:54

如果您唯一的擔心是預先選擇引擎加載，請勿「過度設計」它。

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

然後將您的參數插入您的身體標記到預先定義的變量。如果你想要隨機的東西，用你的公式創建一個新的函數來選擇一個隨機變量，然後在你的新函數中加載你的addOptions（函數）。然後從你的身體標記中刪除addOptions。

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

來源

2010-06-17 20:54:41 listenrightmeow

通過JS添加選擇菜單默認值？

回答

相關問題