javascript - 根据下拉列表中的选择显示 div 的内容

Question

我遇到一些 jQuery 问题，需要根据下拉列表中选择的选项显示 div 的内容

下拉菜单需要将数值传递给计算器才能计算出贷款金额，因此当我为选项值和相应的 div id 添加数值时，代码不起作用。如果我将值和 id 更改为一个词，它就可以正常工作。

是否有变通方法可以使用数值使其正常工作。

 <select name="apr" id="apr" class="loan-calculator__input" >                   
            <option value="">Select</option>
              <option value="4.7" class="good">Good</option>
              <option value="14.9" class="fair">Fair</option>
              <option value="29.9" class="poor">Poor</option>
            </select>
          </div>
          <div id="4.7"  style="display:none;" class="rating" ><p>Good - </p>
</div>
<div id="14.9" style="display:none;"class="rating" ><p>Fair</p>
</div>
<div id="29.9"   style="display:none;" class="rating"><p>Poor  </p>
</div>

(function($) {
$(document).ready(function() { 
    $('#apr').change(function(){
        $('.rating').hide();
        $('#' + $(this).val()).show();
    });
    });
})(jQuery);    

我创建了一个 jsfiddle 来显示代码 - http://jsfiddle.net/nineseven/W37np/

Answer 1

使用数据属性，因为你不能使用数字作为对象 ID

   <div data-selectvalue="4.7"/>


   $("[data-selectvalue='"+$(this).val()+"']").show()