jquery onchange选择选项不能显示tbody标签

时间:2014-10-30 07:41:55

标签: jquery

//选择选项显示值1到12

<select name="damamonth" id="da" required>
    <option value="">--Months--</option>
    <option value=1 id=1>January</option>
    <option value="2" id="2">February</option>
    <option value="3" id="3">March</option>
    <option value="4" id="4">April</option>
    <option value="5" id="5">May</option>
    <option value="6" id="6">June</option>
    <option value="7" id="7">July</option>
    <option value="8" id="8">August</option>
    <option value="9" id="9">September</option>
    <option value="10" id="10">October</option>
    <option value="11" id="11">November</option>
    <option value="12" id="12">December</option>
</select>

<table>
    <thead>
        <tr>
            <th>Seq</th>

        </tr>
    </thead>

//创建tbody并显示1到12

    @for (int i = 1; i <= 12; i++)
    {
        <tbody id="@i" class="comsut" style="display:grid;">
            <tr style="border:1px;">
                <td>@i</td>
            </tr>

        </tbody>
    }
</table>

//这个脚本对我不起作用,我试图在我更改选择选项时显示 //根据我显示tbody

<script>
 $(function () {
        $('.comsut').hide();
        $('#da').change(function () {
            var d = $(this).val();
            $('.comsut').hide();
            var ty = '#' + d;
            $(ty).show();
        });
    });

</script>

2 个答案:

答案 0 :(得分:0)

您正在尝试创建多个tbody。创建单个tbody和多个tr。 Assigne idtr然后运行您的脚本来显示/隐藏它们。见下面的代码

<tbody >
@for (int i = 1; i <= 12; i++)
    {
            <tr id="@i" class="comsut" style="display:grid;border:1px;">
                <td>@i</td>
            </tr>
    }
</tbody>

SCRIPT

<script>
 $(function () {
        $('.comsut').hide();
        $('#da').change(function () {
            var d = $(this).val();
            $('tr.comsut').hide();
            var ty = '#' + d;
            $(ty).show();
        });
    });

</script>

答案 1 :(得分:0)

用以下

替换for循环
@for (int i = 1; i <= 12; i++)
    {
        <tbody id="@i-t" class="comsut" style="display:grid;">
            <tr style="border:1px;">
                <td>@i</td>
            </tr>

        </tbody>
    }

&安培;以下脚本

<script>
 $(function () {
        $('.comsut').hide();
        $('#da').change(function () {
            var d = $(this).val();
            $('.comsut').hide();
            var ty = '#' + d + '-t';
            $(ty).show();
        });
    });

</script>