Question

我希望根据下拉值显示内容。所以2005年的选择只会显示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>

-

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

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

看看这个： jQuery dropdown hide show div based on value

但似乎有点矫枉过正？

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

许多方法可以做到这一点，其中一个是

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

将id放在你的li上

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

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才能使其工作：

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

jQuery根据下拉列表显示内容

3 个答案: