jQuery根据下拉列表显示内容

我希望根据下拉值显示内容。 所以2005年的选择只会显示2005年的日期等内容。

HTML：

 Year... 2007 2006 2005  

–

 
  2006 
 
  2007  

看看这个： jQuery下拉隐藏显示div基于值

但似乎有点矫枉过正？

Answer 1

 $('select#year').change(function(){ theVal = $(this).children(':selected').text(); $('span.date').each(function(){ if($(this).text()==theVal){ $('li.pr').hide(); $(this).parent().show(); } }); }); 

对不起，这个应该使用您拥有的HTML，旧版本基于价值。

Answer 2

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

  Year... 2007 2006 2005  

将id放在你的li上

 
  2006 
 
  2007  

jquery

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

Answer 3

这里有一些快速的JS，在jsbin ， source上测试过

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

但是你需要更改你的html以使其工作：

 Year... 2007 2006 2005