根据下拉列表中的选择显示div的内容。
根据下拉列表中的选择显示div的内容。
提问于 2014-01-17 03:26:08
我遇到了一些需要显示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); 我创建了一个用于显示代码- http://jsfiddle.net/nineseven/W37np/的jsfiddle
回答 6
Stack Overflow用户
回答已采纳
发布于 2014-01-17 03:41:15
使用数据属性，因为不能为对象id使用数字。
<div data-selectvalue="4.7"/>
$("[data-selectvalue='"+$(this).val()+"']").show()Stack Overflow用户
发布于 2014-01-17 03:38:02
我认为您需要获取所选选项的值。其他人也是对的--你的身份证不合适。在演示中，我用破折号替换了它们。
$('#' + $(this).find('option:selected').val()).show();Stack Overflow用户
发布于 2014-01-17 03:38:27
当您使用十进制ID时，它将无法工作。
我可能不会使用这个工作流来显示内容。
但是无论如何，这里有一个基于字符串id的小提琴：
(function($) {
$(document).ready(function() {
$('#apr').change(function(){
$('.rating').hide();
$('#' + $( "#apr option:selected" ).attr("value")).show();
});
});
})(jQuery);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21184792
复制相关文章
![[Excel技巧]创建下拉列表](https://developer.qcloudimg.com/http-save/yehe-7215932/e8a502e6cd0882220ca606c02ff21d78.png)
点击加载更多
相似问题
Angularjs根据下拉列表中的选择显示div。
根据下拉选择更改DIV的内容
Javascript:根据下拉列表选择显示/隐藏div
根据下拉列表中选择的内容更新div的jQuery
根据下拉选择显示div
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
