Question

我正在尝试使用select选项显示一个＆lt; * div＆gt;，其中包含复选框，但它不起作用。

这是我的脚本

jquery的

   $(document).ready(function() {
       $(".feeschedule1").hide();
       $(".feeschedule2").hide();
       $("#select").change(function(){
           var feeschedule1 = $(".feeschdule1");
           var feeschedule2 = $(".feeschdule2");
           var select = $("#select").val();

        if (select == $("#nd1f")){

            feeschedule1.show();
        }
        }else{

            feeschedule1.hide();
        }
        if (select == $("#nd2f")){

            feeschedule2.show();
        }
        }else{
            feeschedule2.hide();

        })


    });

HTML

<form action="" method="">
    <select id="select">
        <option id="nd1f" value="nd1fulltime">ND1 FULL TIME</option>
        <option id="nd2f" value="nd2fulltime">ND2 FULL TIME</option>
    </select>
    <div class="feeschedule1">
        <tr>
            <td><label for="schoolfees">SCHOOL FEES ND1 FULL TIME</label></td>
            <td><input type="checkbox" value="15000" ></td>
        </tr>
    </div>
    <div class="feeschedule2">
        <tr >
            <td ><label for="schoolfees">SCHOOL FEES ND2 FULL TIME</label></td>
            <td><input type="checkbox" value="15000" ></td>
        </tr>
    </div>
</form>

它隐藏＆lt; * div＆gt;很好，但是在做出选择时它并没有显示出来。我有什么不对的吗？

Answer 1

我在代码中注意到的第一件事：

 if (select == $("#nd1f"))

您尝试将val与元素进行比较，它将无法匹配。

比看看if / else：

if (select == $("#nd1f")){

    feeschedule1.show();
} // This is wrong !
}else{

    feeschedule1.hide();
}

您的代码中有很多错误，请参阅此fiddle更正。

要获取所选的选项值，您必须执行以下操作：

   var select = $(this).find('option:checked').val();

你写了：

var feeschedule1 = $("feeschdule1");

应该是

var $feeschedule1 = $(".feeschedule1");

最后的事情是change功能括号未正确关闭。当你编码时，要小心缩进，它会限制这些错误。

Answer 2

你可以采取更有活力的方式来做这件事我发现你有很多重复的代码，例如：

if（select == $（“＃nd2f”））{

您不想使用重复的if语句。更好的方法是使用：

<select class="select" onchange="javascript:myfunction(this.value)">

然后你的动态javascript：

options = [ 'nd1fulltime', 'nd2fulltime' ];
schedules = [ '.feeschedule1', '.feeschedule2' ];

function myfunction(choice) {
    for (i in options) {
        if (choice == options[i]) {
            $(schedules[i]).show();
        }
        else {
            $(schedules[i]).hide();
        }
    }
}

Answer 3

试试这个：

        if (select == "nd1fulltime"){

         feeschedule1.show();
        }else{
        feeschedule1.hide();
        }
        if (select == "nd2fulltime"){

        feeschedule2.show();
        }else{
        feeschedule2.hide();


        });

用if（select == $（“＃nd1f”））进行元素比较。你需要比较元素的值。

不应$("#nd1f")其值应匹配......

Jquery，隐藏/显示选择选项

3 个答案: