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

我一直在这个项目中工作，使用下拉列表显示/隐藏表，我的代码运行良好，但由于CMS和电子商务购物车的要求，我只能在表上使用id，而不能在类和id上使用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

如果您的问题是$'.calendar'。隐藏使用类的部分，一个简单的解决方案是调用：

$tableX.hide在X=1,2,3,4,5或偶数的每个表上

$table.hide，但是最好使用一个div，并使用$yourDiv table来避免隐藏页面上的其他表。

jsiddle:Or

JS:

或

---

我看不出问题是什么？我需要代码在表上没有类的情况下工作-我只能使用ID，例如@EdWaldegrave，然后删除类并相应地更新jQuery？你为什么需要别人帮你换几个词呢？不幸的是，我的jQuery知识已经达到了极限。我很幸运能拿到这么远你能帮我把这个放到小提琴里吗？太好了！谢谢你的帮助：D

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

$('table').hide();

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