HTML下拉列表

如何創建一個HTML下拉列表，一旦個人選擇了一個option value，觀看了他們的選擇，並已決定回去再拍option value選擇是刷新回option disabled標籤。HTML下拉列表

HTML：

<form> 
<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value"> 
<option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option> 
<option value="LINK">Ingham County (Google Map/PDF)</option> 
<option value="LINK">Clinton County (PDF)</option> 
<option value="LINK">Eaton County (PDF)</option> 
</select> 
</form>

的-select名稱 - 標籤生成的用戶到在同一個窗口中打開一個URL。

<select name="URL" onchange="window.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">

如果一名個人從列表中選擇當前標準的，觀看他們的選擇（在同一窗口中打開），並返回（原來的網頁），在下拉菜單中沒有恢復到：

<option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option>

但仍然在option value標記選擇，除非它們刷新/重新加載其瀏覽器窗口。

來源

2013-04-30 Lew

你需要使用jquery來做類似的事情 – Andrew 2013-04-30 13:40:16

基本上，你不能沒有javascript。

我不知道你知道多少，所以我會假設你沒有事先知道的JavaScript。

下面應該做你在問什麼。

正如你所看到的，我改變了onchange屬性來調用一個名爲「ResetToDisabled」的javascript函數，它使用「this」關鍵字傳遞DropDown列表作爲參數。

<select name="URL" onchange="ResetToDisabled(this);"> 
    <option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option> 
    <option value="LINK">Ingham County (Google Map/PDF)</option> 
    <option value="LINK">Clinton County (PDF)</option> 
    <option value="LINK">Eaton County (PDF)</option> 
</select> 
<script type="text/javascript"> 
    function ResetToDisabled(DropDown) { 
     var TargetIndex = DropDown.selectedIndex; 
     DropDown.selectedIndex = 0; 
     window.location.href = DropDown.options[TargetIndex].value; 
    } 
</script>

這裏發生的事情，就是我創建一個名爲「ResetToDisabled」這需要一個對象（在這種情況下，我們可以假定這將是下拉列表下降）作爲參數的JavaScript函數。

該函數創建一個名爲「TargetIndex」的臨時變量，並將其值設置爲下拉列表中的選定索引。

然後它將下拉列表的選定索引設置爲0（第一個選項）。

然後它會執行你的代碼行，你打開一個新的網頁。但是，由於您已將下拉菜單重置回第一個選項，因此當您單擊後，它會將該選項記憶爲已選擇的選項。

我也覺得我應該補充。它看起來像你試圖達到許多網站用於他們的菜單一樣的行爲;如果是這樣的話，你可能想要搜索「CSS下拉菜單」，因爲如果稍後嘗試這樣做，很難改變選擇下拉菜單的外觀。

來源

2013-04-30 14:07:40

謝謝你的回答。然而，我已經嘗試了你添加的代碼，它似乎並沒有呈現函數並將用戶指向一個URL。 – Lew 2013-04-30 14:37:30

我曾看過CSS下拉菜單選項，但認爲我選擇的更適合用途（我只會添加額外的選項值和URL鏈接/外觀將保持不變）。不過謝謝你的建議。 – Lew 2013-04-30 15:10:55

對不起，我的代碼出錯了，它是javascript的最後一行，現在已經修復了。我直接複製該行，而不檢查以確保它能正常工作。直接鍵入「onchange」屬性時，「this」關鍵字引用下拉列表，但「this」不會附加到javascript函數內部的任何內容。現在只需使用傳遞給該函數的下拉菜單。 – 2013-05-01 02:14:37

你不需要爲此使用jquery！

html文件;

<form> 
<select name="URL" onchange="changeme(this)"> 
<option disabled="disabled" selected="selected">Choose a County for Recycling Information.......</option> 
<option value="LINK">Ingham County (Google Map/PDF)</option> 
<option value="LINK">Clinton County (PDF)</option> 
<option value="LINK">Eaton County (PDF)</option> 
</select> 
</form>

js file;

function changeme(mselect) { 
    for (var i = 0; i < mselect.options.length; i++) { 
     if (mselect.options[i].selected == true) { 
      mselect.options[i].setAttribute('disabled', 'disabled'); 
     } 
     else { 
      mselect.options[i].removeAttribute('disabled'); 
     } 
    } 
}

來源

2013-04-30 13:59:15 rcpayan

取決於它們如何導航回到頁面，你應該能夠只是JavaScript的一個有點在頁面加載設置selected index。

YourHTMLElement.selectedIndex = 0;

我會但是請注意，它仍然有選擇的相同的值，它聽起來就像你正在瀏覽回來history.back();，這將可能不會執行通常onload事件。

但我找到了答案here雖然有助於這樣的問題。這將允許jQuery的文檔準備事件觸發，這意味着你可以將它連接起來將selectedIndex重置爲0.

來源

2013-04-30 13:59:24 Turnerj

回答

相關問題