Question

My question is different than just "how do I get the selected option from a select box".

In select box, no option element is ‘selected’ prior to right-clicking on it.
On right-clicking an option, I want to get the value of that option element.

Therefore, option:selected won’t work.

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

I have bound rightclick event to the context menu:

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

  };
    })( jQuery );

The event handler code below will only work if an option is selected prior to right clicking:

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

Without using option:selected, how do I get the value of right-clicked option?

Answer 1

The target property of the event parameter will refer to the element which triggered the event, in your case the option element that was right-clicked:

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

DEMO

A few notes about your code:

• no need to return false and to e.preventDefault, both statement have the same result so just use one or the other

• you might wanna check if method is not undefined and is a function before calling it, otherwise it will break

• when you call method, pass the parameter e to it otherwise you won’t be able to use inside your callback

Here’s the modified code:

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

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

})