Bootstrap原生颜色选择器切换颜色时value值不更新问题求助

问题原因 #

你使用$('#priceColor').attr('value')获取的是HTML元素上最初定义的静态value属性值，用户选择新颜色后，浏览器只会更新DOM对象的value属性（实时值），不会修改HTML源码里的value属性，所以你始终拿到初始值。

解决方案 #

改用jQuery的val()方法获取实时值，它直接读取DOM对象的当前value：

修改后的JavaScript代码：

$('#priceColor').on('change', function() {
  // $(this)指代当前触发事件的元素，写法更高效
  console.log($(this).val());
  // 也可以用选择器直接获取
  // console.log($('#priceColor').val());
});

补充说明 #

• 原生DOM中，元素的HTML属性（比如<input value="xxx">里的value）和DOM对象属性（比如inputElement.value）是两个独立的东西，用户交互更新的是后者。
• 如果需要同步更新HTML上的value属性（比如要让源码里的value跟着变），可以在获取值后加上：

  $(this).attr('value', $(this).val());
  

  但大多数场景下不需要这么做，前端处理实时值用val()就足够。

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