Question

我遇到一些需要显示div内容的jQuery问题，具体取决于下拉菜单中选择的选项

下拉需要将数值传递到计算器中以计算贷款金额，因此当我为选项值和相应的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

使用data属性，因为您不能使用数字作为对象ID

   <div data-selectvalue="4.7"/>


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

Answer 2

我认为您需要获取所选选项的值。其他人也是对的 - 你的ids不合适。在演示中，我用破折号替换了它们。

$('#' + $(this).find('option:selected').val()).show();

Demo

Answer 3

使用小数ID时不起作用。
我可能不会使用此工作流程来显示内容但无论如何，在这里你有一个基于字符串id的小提琴：

http://jsfiddle.net/W37np/11/

(function($) {
$(document).ready(function() { 
        $('#apr').change(function(){
            $('.rating').hide();
            $('#' + $( "#apr option:selected" ).attr("value")).show();
        });
        });
    })(jQuery);

Answer 4

这不起作用，因为它被视为表达式..不要使用数字

错误：语法错误，无法识别的表达式：＃14.9'

检查浏览器的错误控制台

Answer 5

如果想要那些值到那些选项值，你可以将div的id更改为不同的id，例如该选项具有的类，那么你可以按如下方式提取类并显示它

$('#' + $( "#apr option:selected").attr('class')).show();

fiddle demo

Answer 6

    $(document).ready(function () {
                    $('#apr').change(function () {
                        $('.rating').hide();
                        var prefix = "div-";
                        $('#' + prefix + $("#apr option:selected").attr("value")).show();
                    });
                });


<select name="apr" id="apr" class="loan-calculator__input" >                
                <option value="-1">Select</option>
                  <option value="123" class="good">Good</option>
                  <option value="456" class="fair">Fair</option>
                  <option value="789" class="poor">Poor</option>
                </select>
              <div id="div-123"  style="display:none;" class="rating" ><p>Good - You are likely to have stable address and job history be on the electoral role and have plenty of good credit and no missed payments</p>
</div>
<div id="div-456" style="display:none;"class="rating" ><p>years carry a higher level of debt and perhaps missed the odd payment</p>
</div>
<div id="div-789"   style="display:none;" class="rating"><p>Poor – May have missed made late payments or have CCJs and have frequently moved jobs or not be on the electoral role </p>
</div>

由于Id不接受数值。您可以在div标签上使用前缀。

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

6 个答案: