基于默认变量值初始化及onchange事件设置表单字段的jQuery问题排查

问题排查 #

你的代码存在3个核心问题导致功能失效：

• 你声明的匿名函数没有实际执行，默认值初始化逻辑全程没有运行
• 下拉框change事件仅修改了bettype变量的值，没有触发内容更新逻辑，切换选项后页面不会同步变更
• $('removethis')选择器缺少类标识符.或ID标识符#前缀，无法正确匹配到对应DOM元素

修复方案 #

你可以把内容更新逻辑封装为公共函数，初始化和下拉变更时都调用该函数即可，修正后的代码如下：

$(document).ready(function(){
    var bettype = "Treble";
    // 封装公共的视图更新函数
    function updateBetTypeView() {
        var data = '';
        if(bettype == "single") {
            data = '<div>Single Selected</div>';
        } else if(bettype == "double") {
            data = '<div>Double Selected</div>';
        } else if(bettype == "Treble") {
            data = '<div>Treble Selected</div>';
        }
        // 注意这里要补全选择器的.或#前缀，选类就用$('.removethis')，选ID就用$('#removethis')
        $('.removethis').empty();
        $('#row').append(data);
    }

    // 初始化加载默认值对应内容
    updateBetTypeView();

    // 下拉框变更监听
    $("#bettype").change(function(){
        bettype = $(this).children("option:selected").val();
        // 变更后调用视图更新函数同步页面内容
        updateBetTypeView();
    });
});

内容的提问来源于stack exchange，提问作者ChrisYates