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();
}

Javascript显示/隐藏正确的div

4 个答案: