jQuery根據下拉列表顯示內容

我希望根據下拉列表顯示內容。因此，2005選擇只顯示與2005年的最新內容等jQuery根據下拉列表顯示內容

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

，但似乎矯枉過正？

來源

2011-09-01 BobFlemming

我不認爲你鏈接的一個是矯枉過正，這是相當簡單的。您可以簡化hideAllDivs（）方法，因爲您正在使用類，並且不需要列出要隱藏的每個單獨的ID。 – CashIsClay

雖然日期列表是可變的，並且可能是20個左右，但鏈接的方法將意味着寫入一個巨大的列表。 – BobFlemming

根本不是。隱藏ALL $（「。pr」），然後顯示$（「span.date」）的父項，其中值與選定的選項相匹配（下面的答案之一已經說明了如何執行此操作）。雖然這個概念與你所關聯的問題相同。 – CashIsClay

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

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

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

對不起，這一個應該與你有的HTML，舊的基於價值的工作。

來源

2011-09-01 15:14:46 rickyduck

很多方法可以做到這一點，其中之一是

<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 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(); 
    }); 
});

來源

2011-09-01 15:14:46

下面是一些快速的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>

來源

2011-09-01 15:24:13 kalyfe

jQuery根據下拉列表顯示內容

回答

相關問題