我有以下下拉列表:

<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/

08-26 05:47
查看更多