1. 首頁
  2. 問答
  3. 動態下拉框

動態下拉框

2011-08-14 124 views
3

我在我的網站中有兩個下拉菜單。我想要改變一個下拉選項的數量和選項的值，具體取決於我們使用JavaScript通過onChange（）'fn在另一個Dropbox上選擇的值。例如 /第一下拉/動態下拉框

<select name="language" id="language"> 
    <option>select</option> 
    <option >English</option> 
    <option>Tamil</option> 
    <option>Telugu</option> 
    <option >Kannada</option> 
    <option>Malayalam</option> 
    <option >Urdu</option> 
    <option>Punjabi</option> 
</select>

/第二下拉其沒有的選項&值將被基於改變的值以上下拉的// 改變/

<select name="media"> 
    <option>The Indian Express</option> 
    <option >The Hindu</option> 
    <option >CNN IBN</option> 
    <option>NDTV</option> 
</select>

我一直在苦苦掙扎，即使這可以通過PHP來完成，請爲我提供一個解決方案。

來源

2011-08-14 praba230890

回答

3

試試這個。

HTML

<select name="language" id="language" onchange="SetMedia(this)"> 
    <option>select</option> 
    <option >English</option> 
    <option>Tamil</option> 
    <option>Telugu</option> 
</select> 

<select name="media" id="media" disabled="disabled"> 
    <option>select</option> 
</select>

的JavaScript

function SetMedia(objLanguage) { 
    var objMedia = document.getElementById("media"); 
    objMedia.options.length = 0; 
     objMedia.disabled = false; 
    switch (objLanguage.value) { 
    case "English": 
     objMedia.options.add(new Option("The Indian Express")); 
     objMedia.options.add(new Option("The Hindu")); 
     break; 
    case "Tamil": 
     objMedia.options.add(new Option("Tamil Paper 1")); 
     objMedia.options.add(new Option("Tamil Paper 2")); 
     break; 
    case "Telugu": 
     objMedia.options.add(new Option("Telugu Paper 1")); 
     objMedia.options.add(new Option("Telugu Paper 2")); 
     break; 
    default: 
     objMedia.options.add(new Option("select")); 
     objMedia.disabled = true; 
     break; 
    } 
}

演示在這裏：http://jsfiddle.net/naveen/z48dc/

來源

2011-08-14 00:48:55 naveen

+0

它的工作，但如果我嘗試使用另一個JavaScript FN（）（jQuery的）的風格是不工作的下拉菜單。也感謝上述解決方案。 – praba230890

+0

請elaborate。我沒有得到你。 – naveen

+0

在這裏，我試圖通過onchange使用兩個下拉，並試圖添加一些時尚的外觀，這些下拉列表。你的代碼工作正常，當我使用沒有任何樣式的下拉菜單，但這並沒有問題，作爲一個初學者，我無法弄清楚我如何通過onchange方法使第二個下拉菜單太工作。我試過但沒有這樣做。我希望這兩個下拉菜單都能通過onChange工作。 – praba230890

相關問題

 相關問題