1

selectmenu プラグインを使用して、サイトの一部の選択メニューをスタイルアップしています。サイトのフィルタリング機能に使用しています。ユーザーが一度に 1 つのメニューでのみフィルタリングできるようにしたい。そのため、ユーザーが 1 つのメニューでオプションを選択すると、他のメニューの値はデフォルトのオプションに戻る必要があります。

私が達成しようとしていることのjsfiddleセットアップがあります。それはほとんど働いています。他のメニューを取得して、その値をオプションのリストの最初の値にリセットできます。問題は、私が変更しているものは変更されず、デフォルト値のままです。

うまくいけば、私はこれを十分に説明しました。これがjsfiddleへのリンクです....

http://jsfiddle.net/dmcgrew/FBzFL/

これが私のコードです：

<select name="type" id="type">
<option value="*" selected="selected">Select Project Type</option>
<option value=".annualreport">Annual Report</option>
<option value=".branding">Branding</option> 
<option value=".brochures">Brochures</option>
<option value=".retail-signage">Retail Signage</option>
<option value=".video">Video</option>
<option value=".web">Web Development</option>       
</select>

<select name="industry" id="industry">
<option value="*" selected="selected" class="default">Select Project Industry</option>
<option value=".consumergoods">Consumer Goods</option>
<option value=".education">Education</option>
<option value=".entertainment">Entertainment</option>
<option value=".food">Food</option>
<option value=".healthcare">Healthcare</option>
</select>

$(function(){            


$('select').selectmenu({
menuWidth: 170,
width: 170,
maxHeight: 600
});

$('select#type').change(function(){
$("select#industry").selectmenu("index", 0);
});

$('select#industry').change(function(){
$("select#type").selectmenu("index", 0);
});



});
4

3 に答える 3

0

リスナーのバインドを解除することもできますが、私の意見では、代わりにクラスを追加および削除することをお勧めします (「jQuery イベント処理を一時的に抑制する」を参照)。あなたの場合：

$('select#type').change(function(){
    if ($(this).hasClass('fired') == false) {
        $('select#type').addClass('fired');
        $('select#industry').selectmenu("index", 0);
    }
    $('select#industry').removeClass('fired');    
});

$('select#industry').change(function(){
     if ($(this).hasClass('fired') == false) {
        $('select#industry').addClass('fired');
        $("select#type").selectmenu("index", 0);
    }
    $('select#type').removeClass('fired');   
});

ここに jsfiddle があります: http://jsfiddle.net/JEfMD/

于 2013-01-18T16:31:28.577 に答える
0

あ、わかった！

1 つの選択ドロップダウンの値をプログラムで変更すると、要素にアタッチされた変更リスナーが起動されます。そのため、UI を介して 1 つの選択ドロップダウンの値を変更しても、両方の変更リスナーが起動されます。

編集：あなたがそれを理解したと聞いてうれしいです！はい、変更リスナーを保持する方法を見つけようとしていましたが、明らかな何かが欠けていない限り、思ったよりもはるかに困難です。しかし、アンカー要素にクリック リスナーを設定すると、この問題はうまく解決するはずです。

于 2013-01-18T15:59:50.530 に答える
0

の代わりにドロップダウン内のを検出する必要がclick()ありました。新しいjsは次のとおりです。achange()select

$('ul#type-menu li a').click(function(){
    $("select#industry").selectmenu("index", 0);
});

$('ul#industry-menu li a').click(function(){
    $("select#type").selectmenu("index", 0);
});
于 2013-01-18T16:27:55.447 に答える