Javascript显示/隐藏正确的div

Question

我有一个页面,下拉有3个项目:

<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,所以这对我来说都是新手.

Answer 1

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

您还可以为所有这些基类分配基类,并使用它来调用.hide(),因为当前方法必须遍历所有元素并检查其类.

class^="OrderOption" - 此行选择类"以OrderOption开头"的所有元素.

'.OrderOption'+orderOption- 然后我们将上面的值附加到另一个选择器上以选择合适的值OrderOption.