我有以下下拉列表:
<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
<option value="Toni">Toni</option>
<option value="Jack">Jack</option>
<option value="James">James</option>
</select>
在此之下,我有以下div:
<div class="singer_profile_overview" id="toni">...</div>
<div class="singer_profile_overview" id="jack">...</div>
<div class="singer_profile_overview" id="james">...</div>
这些设置为显示:无使用CSS
我试图做到这一点,以便当我从下拉列表中选择名称时,将“可见”类添加到相应的div中,如果选择再次更改,则将其再次删除。
这是我到目前为止尝试过的,但是没有运气:
jQuery(document).ready(function($){
$("#about_performance_lead_singer").change(function () {
$('#'(this).val()).addClass('visible');
});
});
最佳答案
尝试这个。您还需要将值转换为lowerCase()
以获得完全匹配。
<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
<option value="Toni">Toni</option>
<option value="Jack">Jack</option>
<option value="James">James</option>
</select>
<div class="singer_profile_overview" id="toni">toni</div>
<div class="singer_profile_overview" id="jack">jack</div>
<div class="singer_profile_overview" id="james">james</div>
<style>
.singer_profile_overview
{
display:none;
}
.visible
{
display: block
}
</style>
<script>
jQuery(document).ready(function($){
$("#about_performance_lead_singer").change(function () {
$('.singer_profile_overview').removeClass('visible'); // hide all divs by removing class visible
$('#' + $(this).val().toLowerCase()).addClass('visible'); // find the matching div and add class visible to it
});
});
</script>
示例:http://jsfiddle.net/RxguB/204/