Question

我有一段代码包含HTML＆amp;的JavaScript。

HTML代码

<select name="paytype" id="paytype" onchange="insProviderTable()">
            <option value="Cash">Cash</option>
            <option value="Credit" selected>Credit</option>
        </select>

<div id="insuranceDetails" style="display:none">
    BULB
</div>

和JavaScript代码

function insProviderTable() {   
        if ($('#paytype').val() == 'Credit') {
            $('#insuranceDetails').show(1000);
        }
        else {
            $('#insuranceDetails').hide(1000);
        }
    };

$(insProviderTable);

问题是在页面加载时出现div insuranceDetails，但如果我将paytype的值更改为Cash，则不会发生任何事情。

请告诉我错误的地方。

jsfiddle link https://jsfiddle.net/5bjfxdq4/

Answer 1

您可以尝试这样：

您可以在加载时触发change()，如下所示：

$("#paytype").on("change",function(){
      if ($(this).val() == 'Credit') {
            $('#insuranceDetails').show(1000);
        }
        else {
            $('#insuranceDetails').hide(1000);
        }
}).change();

Demo

Answer 2

只需将其添加到现有脚本的底部

即可

$("#paytype").bind('change', function(){
$(insProviderTable);

}）;

在主体和

之间添加

$(insProviderTable);

希望这会有所帮助，让我知道你是如何上场的！

Answer 3

只需删除内联onchange-handler并写入：

function insProviderTable() {
    if ($('#paytype').val() == 'Credit') {
        $('#insuranceDetails').show(1000);
    } else {
        $('#insuranceDetails').hide(1000);
    }
};

$(document).ready(function(){
    $('#paytype').on('change', function () {
        insProviderTable();
    });

    insProviderTable();      
});

Demo

onChange无法显示/隐藏div

3 个答案:

Demo