如何让jQuery支持小数类型option值，实现5.5、6.5选项内容展示

这个问题的核心是jQuery选择器对特殊字符的解析规则：当你用$('#5.5')这种写法时，jQuery会把.当成类选择器的标识符，它会尝试寻找id="5"且带有class="5"的元素，而不是你实际想要的id="5.5"的元素。

下面给你两种可行的解决方案：

方案1：转义ID中的特殊字符 #

把Option Value里的小数点转义成jQuery能正确识别的格式（JavaScript里需要用双反斜杠\\.来转义）：

$(function() {
  $('#percentage_select').change(function() {
    $('.rates').hide();
    // 全局替换小数点为转义后的格式
    var targetId = $(this).val().replace(/\./g, '\\.');
    $('#' + targetId).show();
  });
});

方案2：使用属性选择器（更推荐） #

直接通过id属性精确匹配元素，这种方式不需要处理特殊字符，代码更简洁：

$(function() {
  $('#percentage_select').change(function() {
    $('.rates').hide();
    // 用属性选择器精确匹配id值
    $('[id="' + $(this).val() + '"]').show();
  });
});

注意事项 #

确保你要显示的内容容器的id和Option的value完全一致，比如：

<div class="rates" id="5">5%对应的内容</div>
<div class="rates" id="5.5">5.5%对应的内容</div>
<div class="rates" id="6">6%对应的内容</div>
<div class="rates" id="6.5">6.5%对应的内容</div>

这样修改后，选择带小数的选项时就能正确显示对应的内容了。

内容的提问来源于stack exchange，提问作者Kristaps Vecgrāvis