onChange 不工作 show/hide a div

Question

我有一段代码 HTML & 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 的值更改为现金，则没有任何反应。

请让我知道我错在哪里。

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

Answer 1

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

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

});

在正文和

之间添加

$(insProviderTable);

希望这对您有所帮助，请告诉我您的进展情况！

Answer 2

只需删除内联 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

Answer 3

你可以这样试试：

您可以像下面这样在加载时触发 change()：

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

onChange 不工作 show/hide a div

onChange not working to show/hide a div

html

javascript

jquery

onchange

selectionchanged

Demo