动态字段中添加select onchange后代码变灰？如何实现选品自动更新价格

• 为商品下拉框添加选中后自动更新价格的onchange事件后，页面其余JS代码全部变灰、无法运行，需求为选中对应商品时，匹配的商品价格可自动同步到对应输入框。

• 写在HTML标签属性里的内联JS存在引号转义、语法解析错误，导致整个script块触发编译异常，浏览器会将同一块内的所有未执行代码标记为灰色，直接中断整个页面的JS执行流
• 所有静态、动态生成的下拉框重复使用同一个id，违反DOM唯一性规范，导致选择器定位元素时出现错乱
• 动态追加的下拉框元素没有绑定事件监听，选中时无法触发价格更新逻辑
• 自定义的price属性未遵循HTML5规范，部分浏览器解析时会出现属性值丢失的问题

1. 移除HTML标签上的内联onchange代码
   不要把复杂的jQuery逻辑直接写在标签属性里，换成在公共容器上做事件委托，不管是初始渲染的下拉框还是后续动态追加的下拉框，都能正常触发事件，示例代码：

   // 绑定动态字段父容器的change事件，委托处理所有后代下拉框的选中操作
   $('#dynamic_field').on('change', 'select.item-picker', function() {
       // 获取当前选中项对应的商品价格
       const price = $(this).find('option:selected').data('price');
       // 定位到当前行的价格输入框，填入对应价格
       $(this).closest('tr').find('input.price-box').val(price);
   });
   

2. 修正PHP渲染下拉选项的代码
   把原自定义的price属性替换为符合规范的data-price，同时增加内容转义处理，避免特殊字符打断HTML结构，修正后的代码：

   $SQL = "SELECT * FROM tblitem WHERE STATUS = 'A'";
   $Result = mysqli_query($Link, $SQL);
   if (mysqli_num_rows($Result) > 0) {
       echo '<option value="">-- 请选择商品 --</option>';
       // 用while遍历结果集，替代原低效的for循环计数遍历
       while ($Row = mysqli_fetch_assoc($Result)) {
           // 对输出内容做html转义，避免引号、特殊字符破坏HTML标签结构
           echo sprintf(
               '<option data-price="%s" value="%s">%s %s</option>',
               htmlspecialchars($Row['sellingPrice']),
               htmlspecialchars($Row['itemID']),
               htmlspecialchars($Row['itemID']),
               htmlspecialchars($Row['itemName'])
           );
       }
   }
   

3. 调整DOM元素的类名与id规则
   • 去掉原代码里所有下拉框重复的id="conname"属性，给每个下拉框加统一类名item-picker
   • 给原来用来输出价格的输入框加统一类名price-box
   • 动态通过JS渲染下拉选项时，要同步把对应商品的价格值写到option的data-price属性里，避免事件触发时读不到对应价格值，原来的动态append option代码修正示例：

     for(j=0;j<values.length;j++){
         // 把对应价格存到option的data-price属性里
         $('#txtConname'+i).append(
             '<option data-price="'+storePrice[j]+'" value="'+storeId[j]+'">'+values[j]+'</option>'
         );
     }
     

   • 动态追加新行的HTML模板里，保持新生成的下拉框和价格输入框的类名与规则一致，不需要单独给新元素绑定事件

• 所有内联写在HTML属性里的JS代码，会在HTML解析阶段直接编译，一旦出现语法错误，会导致整个页面的JS执行流中断，连带其他正常代码都无法运行，尽量把JS逻辑统一放到script块里管理
• 动态DOM场景下优先使用事件委托，比单元素绑定的稳定性更高，不会因为元素动态生成就失效
• 读取自定义属性值时，用jQuery的data()方法比直接用attr()兼容性更好，也能避免属性值带特殊字符导致的读取错误

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