的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显示/隐藏正确的格

回答

相关问题