jQuery基于下拉菜单显示内容

我希望根据下拉值显示内容。因此，2005 select将仅显示日期为2005等的内容

HTML:

    <select id="year" name="Year"> 
        <option value="#" selected="selected">Year...</option> 
        <option value="#">2007</option> 
        <option value="#">2006</option> 
        <option value="#">2005</option> 
    </select> 

年。。。
2007
2006
2005

-

2006


2007

看看这个,

但似乎有点过分了

$('select#year').change(function(){

    theVal = $(this).children(':selected').text();
    $('span.date').each(function(){

        if($(this).text()==theVal){
            $('li.pr').hide();
            $(this).parent().show();
        }
    });
});

---

很抱歉，这一个应该适用于您拥有的HTML，旧的一个是基于值的。

有很多方法可以做到这一点，其中之一是

<select id="year" name="Year"> 
            <option value="#" selected="selected">Year...</option> 
            <option value="2007">2007</option> 
            <option value="2006">2006</option> 
            <option value="2005">2005</option> 
</select>

---

这里有一些快速JS，经过测试

但您需要稍微更改html，才能使其正常工作：

<option value="#" selected="selected">Year...</option> 
<option>2007</option> 
<option>2006</option> 
<option>2005</option> 

年。。。
2007
2006
2005

我不认为你链接的那一个太过分了，它相当简单。您可以稍微简化hideAllDivs（）方法，因为您使用的是类，不需要列出每个要隐藏的id。虽然日期列表是可变的，可能有20个左右长，但链接方法意味着要编写一个巨大的列表。一点也不。隐藏所有$（“.pr”），然后显示$（.span.date”）的父项，其中值与所选选项匹配（下面的一个答案已经说明了如何执行此操作）。不过，这个概念与您链接的问题相同。

<li class="pr" id="2006">
   <a class="image" href="image.jpg" width="50" height="50" /></a>
   <span class="date">2006</span>
</li>

<li class="pr" id="2007">
   <a class="image" href="image.jpg" width="50" height="50" /></a>
   <span class="date">2007</span>
</li>

$(function() {
    $('ul li').hide();  
    $('#year').change(function() {
       var year = $(this).val(); 
       $('#'+ year).show();  
    }); 
}); 

$('#year').live('change', function(){
  var Year = $(this).val();
  $('li.pr').hide();
  $('span.date').each(function(){
    if ($(this).text() == Year){
      $(this).parent().show();
      return false;
    }
  });
});

<option value="#" selected="selected">Year...</option> 
<option>2007</option> 
<option>2006</option> 
<option>2005</option>