jQuery下拉选择other选项显示输入框onchange失效问题排查

你判断的没错，故障点就是动态拼接onchange属性时的引号缺失+转义错误。
你写的拼接代码最终渲染到页面上的select标签，onchange属性没有外层包裹引号，浏览器解析HTML属性时遇到未转义的引号就会截断属性值，最终实际绑定的事件根本不是完整的showHideElement("xxx")调用，参数完全错乱，事件触发自然不会生效。
你当前代码渲染出的问题标签实际结构是这样的：

<!-- 浏览器解析时onchange只识别到showHideElement(，后面的内容全被当成无效属性 -->
<select class="form-control" name="entrance_exam1" onchange=showHideElement("txt-entrance_exam1") id="entrance_exam1">

二选一即可：

方法1：修正内联事件的引号转义 #

给onchange属性的整体值包裹上单引号，因为JS拼接字符串外层用的是单引号，所以属性外层的单引号需要加反斜杠转义，直接替换你出问题的那行代码即可：

html += '<select class="form-control" name="entrance_exam'+entrance_counter+'" onchange=\'showHideElement("txt-entrance_exam'+entrance_counter+'")\' id="entrance_exam'+entrance_counter+'">';

修复后渲染出的标签属性是完整的，浏览器能正确识别事件绑定的完整函数和参数。

方法2：用jQuery事件委托（更推荐，彻底避免引号问题） #

动态生成的DOM元素不建议写内联onchange事件，用事件委托的方式不需要每次拼接元素时处理转义，也不会污染全局函数：

• 第一步：拼接select标签时直接删掉内联的onchange属性，给select加一个专用类名方便选元素，修改对应拼接行：

// 删掉原代码里的onchange=xxx部分，加entrance-exam-select类
html += '<select class="form-control entrance-exam-select" name="entrance_exam'+entrance_counter+'" id="entrance_exam'+entrance_counter+'">';

• 第二步：在页面初始化的公共脚本里（不要写在add_ent_button的点击回调里），绑定委托事件：

$(function() {
  // 给动态生成的考试下拉框绑定change事件
  $(document).on('change', '.entrance-exam-select', function() {
    const inputId = 'txt-' + this.id;
    // 选中other时显示输入框，否则隐藏
    $(this).val() === 'other' ? $('#' + inputId).show() : $('#' + inputId).hide();
  })
})

注意：如果用方法1，要提前确认你的showHideElement函数逻辑正确：接收元素id参数后，判断关联下拉框的选中值是否为other，对应控制输入框的显示/隐藏，不要写反显隐逻辑。

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