2012-02-23 17 views
1

私の質問は、選択ボックスで右クリックで選択ボックスのオプション値:オプションを使用せずに:選択

「どのように私は、選択ボックスから選択したオプションを得るのですか」だけで、何のオプション要素「が選択されていないとは異なっています'を右クリックしてください。右クリックオプションで
は、私は、そのオプション要素の値を取得したいです。

したがって、オプション:選択したが動作しません。

<select name='mySel' id='mySel' multiple> 
    <option value='val1'>myOption1</option> 
    <option value='val2'>myOption2</option> 
</select> 

私はオプションがないと右clicking--

$('#mySel').rightClick(function(e){ 
    alert($('#mySel option:selected').text()); 
    }); 

前に選択されている場合は、以下のイベントハンドラコードにのみ機能します

// bind right click event to context menu 
(function($) { 
    $.fn.rightClick = function(method) { 
    $(this).bind('contextmenu rightclick', function(e){ 
    e.preventDefault(); 
    method(); 
    return false; 
    }) 

    }; 
    })(jQuery); 

コンテキストメニューに右クリックイベントをバインドしていますオプションを使用する:選択したオプションを右クリックして値を取得するにはどうすればよいですか?あなたのヒントについては、事前に

感謝。

+2

心に来る最初の質問:なぜ? – mplungjan

+0

1)リストからそのオプションを削除するには、2)そのオプションのvalを取得し、削除のためにサーバーに送信してください(サブミット後) – Vineet

+1

また、 'Right-Click'プラグインのソースもチェックアウトしてください:http:// www.abeautifulsite.net/blog/2008/05/jquery-right-click-plugin/、それは同様のことをします... – robasta

答えて

1

あなたのケースでは、イベントをトリガした要素に右クリックしたオプションの要素を参照するイベントパラメータのtargetプロパティ:

$('#txBase').rightClick(function(e){ 
    alert(e.target.value); // val1 or val2 
}); 

DEMO

いくつかの注意事項あなたのコードについて:

  • return falseへとする必要はありません、両方のステートメントは同じ結果を持っているので、ちょうどあなたがmethodが未定義ではなく、それを呼び出す前に関数であり、あなたがmethodを呼び出すときに、それ以外の場合は

  • を破るだろうかどうかを確認したいかもしれません、どちらか一方

  • を使用、そうでない場合は、あなたのコールバックの内側に

を使用することができなくなり、それにパラメータを渡すeここで変更したコードです:

$(this).bind('contextmenu rightclick', function(e) { 
    e.preventDefault(); 

    if (method && $.isFunction(method)) { 
     method(e); // pass the event parameter to your callback 
    } 

}) 
これについて
+0

@Didler Ghys、ありがとう。コードが機能しました。私はあなたの答えを受け入れた:)それは助け – Vineet

+0

はうれしいです! –

0
<select name='mySel' id='mySel' multiple> 
<option value='val1' oncontextmenu="getValue(this);return false">myOption1</option> 
<option value='val2' oncontextmenu="getValue(this);return false">myOption2</option> 
</select> 
<div id="status"></div> 
<script> 
function getValue(t){ 
document.getElementById('status').innerHTML=t.value;  
} 
</script> 

何?

関連する問題