javascript - 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.

Answer 2

试试这个

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

Answer 3

对您的 div 进行排序，以便它们以与其相应选项相同的顺序出现。给他们上同一堂课。将它们全部隐藏，然后显示与所选选项对应的选项：

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

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

Answer 4

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

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