jQueryをフォームに追加してドロップダウンメニューを表示/非表示にする

Question

WordPressのサイトにjQueryを追加しようとしているので、ユーザーがトップドロップダウンメニューで特定のオプション（ソフトウェア）を選択すると、私は次のコードを使用してい

- 誰かがこれを行うために私を助けることができれば

<p id="parent-menu"> 
    <select name='cat' id='cat' class='dropdown' tabindex="40"> 
     <option value='-1'>Select a Category</option> 
     <option class="level-0" value="13">Software problem</option> 
     <option class="level-0" value="14">Hardware problem</option> 
     <option class="level-0" value="15">Suggestion</option> 
     <option class="level-0" value="16">General query</option> 
    </select> 
</p> 
<p id="toggle-menu"> 
    <select name='cat' id='cat' class='dropdown' tabindex="50"> 
     <option value='-1'>Select a Program</option> 
     <option class="level-0" value="6">BigHand</option> 
     <option class="level-0" value="7">IRIS</option> 
     <option class="level-0" value="8">MS Outlook</option> 
     <option class="level-0" value="9">MS Word</option> 
     <option class="level-0" value="10">MS Excel</option> 
     <option class="level-0" value="11">Oyez</option> 
     <option class="level-0" value="12">Internet Explorer</option> 
    </select> 
</p> 

IdはGREATFULなります。

ありがとうございました。私はワードプレスはjQueryのをどのように処理するかについて正確にわからないhttp://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

Answer 1

が、私はPHPでこれを書いていた場合、それはのようになります。

Answer 2

あなたはjQueryのUIを使用する場合は、エリックHyndsが役に立つプラグインを見つけるかもしれません。分類法をidまたはvalueに変更します。そして、クエリは私のボタンをクリックして行くだろう。クリックインスタンスごとにIDを変更する必要があります。

$(".class#id").toggle(); 
$(".dropdown#software").toggle(); 

ok。だからあなたの新しい情報に。特定のIDがあるので、私は使用することができます。オプション13が選択されたときのコードページを確認するために何かを含める必要があります。そのオプションが選択されると、あなたはこのようなものが必要になります。

$("#toggle-menu").toggle(); 

または

$("#toggle-menu").show(); 

今ここでの考え方は、（あなたがオプションの選択に基づいて、このアクションまたはイベントがある場合はトグルを使用していることである）の選択に応じて、トグル・メニューを表示または非表示になり、すなわち私はそれが表示されたらそれを選択した、私はそれを再び選択または選択解除メニューが消えます。 show（）を使用すると、トグルメニューが表示されますが、非選択の場合は非表示になります。その場合は、他のすべてのイベント選択でhide（）を使用してトグルメニューを非表示にします。

Answer 3

トグルメニュー最初のメニューで選択されたものはこれです

$('#parent-menu').change(function(event) 
{ 
    $('#toggle-menu').show(); 
}); 

$('#toggle-menu').change(function(event) 
{ 
    var selections = $('#parent-menu').val() + ' ' + $('#toggle-menu').val(); 
    alert(selections); 
});