Question

我正在尝试根据选择框选项更新div中的内容。

如果选中，则应使用该选项的ID来显示或隐藏该区域中的相应div。

<select class=" outtaHere">
        <option class="selected" value="australia_new_zealand_holidays"> Australasia</option>
        <option value="central_america_and_caribbean"> Central America &amp; the Caribbean</option>
        <option value="europe"> Europe</option>
        <option value="indian_subcontinent_holidays"> Indian Subcontinent</option>
        <option value="north_central_asia"> North &amp; Central Asia</option>
        <option value="north_africa_middle_east"> North Africa &amp; Middle East</option>
        <option value="north_america"> North America</option>
        <option value="polar_regions"> Polar Regions</option>
        <option value="south_america"> South America</option>
        <option value="south_east_asia"> South East Asia</option>
        <option value="sub_saharan_africa"> Sub Saharan Africa</option>
         </select>

除非选择上述之一，否则应隐藏所有内容：

<div class="scroll-content">
  <ul class="countrylist australia_new_zealand_holidays">
    <li><a href="countries/australia-holidays">Australia</a></li>
    <li><a href="countries/papua-new-guinea-holidays">Papua New Guinea</a></li>
    <li><a href="countries/new-zealand">New Zealand</a></li>
  </ul>
  <ul class="countrylist central_america_and_caribbean">
    <li><a href="countries/costa-rica-holidays">Costa Rica</a></li>
  </ul>
  <ul class="countrylist europe">
    <li><a href="countries/finland-holidays">Finland</a></li>
    <li><a href="countries/france-adventure-holiday">France</a></li>
  </ul>
  <ul class="countrylist indian_subcontinent_holidays">
    <li><a href="countries/bhutan-holidays">Bhutan</a></li>
    <li><a href="countries/india-holidays">India</a></li>
    <li><a href="countries/nepal-adventure-holidays">Nepal</a></li>
    <li><a href="countries/sri-lanka-holidays">Sri Lanka</a></li>
  </ul>
</div>

在选择选择框的同时，我需要使用值更新以下div：

<div class="desrarea optionvalue">

Answer 1

试试这个

http://jsfiddle.net/XfPv7/1/

$('.outtaHere').change(function(){
    var selected = $(this).find(':selected');
    $('.countrylist').hide();


    $('.'+selected.val()).show();
    $('.optionvalue').html(selected.html()).
       attr('class', 'optionvalue '+selected.val());   
});

有漂亮的动画：

http://jsfiddle.net/faceleg/aKr5w/

$('.outtaHere').change(function(){
    var selected = $(this).find(':selected');
    $('.optionvalue').fadeOut(function(){
         $('.optionvalue').html(selected.html()).fadeIn()
             .attr('class', 'optionvalue '+selected.val());   
    });
    var count = $('.countrylist').length;
    $('.countrylist').slideUp(function(){
        if(!--count) {
           $('.'+selected.val()).slideDown();
        }       
    });
});

根据jquery中的select下拉列表更改内容

1 个答案: