2013-02-21 3 views
1

я хочу, чтобы отобразить 2x меню выпадающего как будет предварительно заселенным (второе меню «mainToon» будет содержать более 200 имен, но для примера я показал лишь немногим.Как показать textarea на основе выпадающего списка с помощью jquery?

<select id="category" name="Category"> 
    <option value=" "></option> 
    <option value=" ">-----------------</option> 
    <option value="Main Toon">Main Toon</option> 
    <option value="Alt Toon">Alt Toon</option> 
    <option value="Cyno Toon">Cyno Toon</option> 
    <option value="Super Toon">Super Toon</option> 
    <option value="Dust Toon">Dust Toon</option> 
</select> 

<select id="mainToon" name="mainToon"> 
    <option value=" "></option> 
    <option value=" ">-----------------</option> 
    <option value="Agmar">Agmar</option> 
    <option value="S Tein">S Tein</option> 
    <option value="Karades">Karades</option> 
    <option value="Bad Kharma">Bad Kharma</option> 
    <option value="Ed jeni">Ed Jeni</option> 
</select> 

по умолчанию первых выпадающий покажет пустой и я хочу, чтобы выпадающий "mainToon", чтобы быть скрыты до тех пор пока какой-либо из выбраны следующие:

"Alt Toon", "собакоподобных обезьян Toon", "Супер Toon", "Пыль Toon"

Тогда форма будет видимой.

Могу ли я сделать это, применив код скрытого кода CSS к выпадающему меню и динамически изменяя класс при выборе других параметров?

большое спасибо за помощь.

ответ

4

Первый скрыть ваш выпадающий: -

<select id="mainToon" name="mainToon" style="display:none;"> 
</select> 

И использовать Jquery функция показать скрыть, как это: -

$(document).ready(function(){ 
    $("#category").change(function(){ 
     var value = $(this).val(); 
     if(value=="Alt Toon" || value=="Cyno Toon") 
     { 
      $("#mainToon").show(); 
     } 
     else 
     { 
      $("#mainToon").hide(); 
     } 
    }); 
}); 
+0

Вам не хватает '=' on 'value =" Cyno Toon "', должно быть 'if (value ==" Alt Toon "|| value ==" Cyno Toon ")' – Sean

+0

@Sean: - thanks. . –

+0

+1 хорошая душа – Sean

1

Ниже показано DEMO, как показать DIV на основе значения выбора,

$(function() { 
    $('#colorselector').change(function(){ 
      $('.colors').hide(); 
      $('#' + $(this).val()).show(); 
     }); 
    }); 

И Here работает демонстрационная версия.

Смежные вопросы