通过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添加选择菜单默认值？

回答

相关问题