的Javascript顯示/隱藏正確的格

我有一個網頁的下拉3個項目：的Javascript顯示/隱藏正確的格

<select name="orderOption" id="orderOption"> 
<option value="1">Item 1</option> 
<option value="2">Item 2</option> 
<option value="3">Item 3</option> 
</select>

目前有Javascript來顯示或隱藏相應的類一個div，基於該選擇。

function orderOptionChanged() { 
     var e = document.getElementById("orderOption"); 
     var orderOption = e.options[e.selectedIndex].value; 

     if (orderOption == "1") { 
      $('.OrderOption1').show(); 
      $('.OrderOption2,.OrderOption3,').hide(); 
     }

這對其中的3個很好，但現在他們想要其中的25個。我需要一種方法來選擇只有一個選項，而無需全部寫出。我以前從來沒有使用JavaScript，所以這對我來說都是新的。

來源

2012-08-09 Silverwulf

您可以將單個類所有的人？ – 2012-08-09 21:04:13

var orderOption = e.options[e.selectedIndex].value; 
$('*[class^="OrderOption"]').hide(); 
$('.OrderOption'+orderOption).show();

你也可以指定一個基類所有的人，並用它來打電話.hide()，因爲目前的方法要經過的所有元素，並檢查其類。

class^="OrderOption" - 此行選擇「從OrderOption開始」的所有元素。

'.OrderOption'+orderOption - 然後我們將上面的值附加到另一個選擇器上以選擇合適的OrderOption。

來源

2012-08-09 21:02:41 ahren

我現在就去試試。如果這項工作，它將成爲一個救生員。 – Silverwulf 2012-08-09 21:11:56

完美工作。感謝幫助。 – Silverwulf 2012-08-09 21:25:36

，使他們出現在相同的順序，其相應的選項試試這個

function orderOptionChanged() { 
     var e = document.getElementById("orderOption"); 
     var orderOption = e.options[e.selectedIndex].value;  
     $('#orderOption option').hide(); 
     $('.OrderOption'+orderOption).show(); 
}

來源

2012-08-09 21:04:46 Vahan

令你的div。給他們全班同一班。隱藏所有這些，然後顯示對應於所選擇的選項之一：

$("#orderOption").change(function() { 
    $(".orderOption").hide().eq(this.selectedIndex).show(); 
});

工作演示：http://jsfiddle.net/mXc93/

來源

2012-08-09 21:07:07 gilly3

function orderOptionChanged() { 
    var e = $("#orderOption"); 
    var orderOption = e.val(); 
    var option = $('.OrderOption'+orderOption); 

    option.show(); 
    $('[class^=OrderOption]').not(option).hide(); 
}

來源

2012-08-09 21:08:35

的Javascript顯示/隱藏正確的格

回答

相關問題