Question

我一直在使用下拉列表来显示/隐藏表格，我的代码工作正常，但由于CMS和电子商务购物车的要求，我只能使用id s在表上（而不是类和id）。

您的想法是，您可以从下拉菜单中选择您的郊区，并根据您的郊区如何适合某个类别（即北，东等），您将看到相应的表格。

的jQuery

$(function () {
    $('#billing_address2').change(function () {
        $('.calendar').hide();
        if ($(this).val() == "None") {
            $('#empty').show();
        }
        if ($(this).val() == "Sandringham" || $(this).val() == "Mt Roskill") {
            $('#table2').show();
        }
        if ($(this).val() == "Glen Eden" || $(this).val() == "Lynfield") {
            $('#table3').show();
        }
        if ($(this).val() == "Arch Hill" || $(this).val() == "Owairaka") {
            $('#table4').show();
        }
        if ($(this).val() == "Castor Bay" || $(this).val() == "Hillcrest" || $(this).val() == "West Harbour") {
            $('#table5').show();
        }
    });
});

HTML

<select id="billing_address2" name="billing_address2">
    <option selected="selected" value="None">Choose Suburb</option>
    <option value="Arch Hill">Arch Hill</option>
    <option value="Castor Bay">Castor Bay</option>
    <option value="Glen Eden">Glen Eden</option>
    <option value="Hillcrest">Hillcrest</option>
    <option value="Lynfield">Lynfield</option>
    <option value="Mt Roskill">Mt Roskill</option>
    <option value="Owairaka">Owairaka</option>
    <option value="Sandringham">Sandringham</option>
    <option value="West Harbour">West Harbour</option>
</select>
<table id="empty" class="calendar">
    <tr>
        <td>table 1</td>
    </tr>
</table>
<table id="table2" class="calendar" style="display:none">
    <tr>
        <td>table 2</td>
    </tr>
</table>
<table id="table3" class="calendar" style="display:none">
    <tr>
        <td>table 3</td>
    </tr>
</table>
<table id="table4" class="calendar" style="display:none">
    <tr>
        <td>table 4</td>
    </tr>
</table>
<table id="table5" class="calendar" style="display:none">
    <tr>
        <td>table 5</td>
    </tr>
</table>

Answer 1

如果您的问题是使用课程的$('.calendar').hide()部分，则可以通过以下方式轻松解决：

每张桌子上的

$("#tableX").hide()（X = 1,2,3,4,5），甚至

$("table").hide()，但是你最好使用div并使用$("#yourDiv table")来避免在页面上隐藏其他表格。

Answer 2

JSfiddle：http://jsfiddle.net/CHQ42/3/或http://jsfiddle.net/CHQ42/5/

JS：

$('table').hide();

OR

    $('#empty').hide();
    $('#table2').hide();
    $('#table3').hide();
    $('#table4').hide();
    $('#table5').hide();

使用下拉列表显示/隐藏表 - jQuery

2 个答案: