如何通过双击下拉列表提交值？

Question

I'm looking for a way to submit a value with two clicks in drop-down list ( which is auto-sized ) using Greasemonkey.

Target HTML:

<form method="post">
  <select size="3" name="z_pos_id">
    <option value="2463">Option A</option>
    <option value="2609">Option B</option>
    <option value="3013">Option C</option>
  </select>
  <input type="submit" value="Button">
</form>

At the moment I click on the option to select it and then I click on the button to submit the value (Press Enter works too).

But with a Greasemonkey script I want to click on the option to select it and click again on the selected option to submit it. Is this possible?

Answer 1

One way to handle double left -clicks, without interfering with center and right-clicks (too much), is to:

1. Track whether the <option> was selected when the mousedown event fires.
2. Make sure it's still selected when the mouse click event later fires.
3. If both conditions are true, submit the containing form.

To simplify the code greatly, use jQuery this time. See the code in action at jsFiddle .

A complete script would look something like this:

// ==UserScript==
// @name     _Activate double-click on select, submits form
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change introduced
    in GM 1.0.   It restores the sandbox.
*/

$("select[name=z_pos_id] option").bind ("mousedown click", handleOptionClicks);

function handleOptionClicks (zEvent) {
    _self                   = handleOptionClicks;
    _self.optionWasSelected = _self.optionWasSelected || false;

    if (zEvent.type == "mousedown") {
        _self.optionWasSelected = zEvent.target.selected;
    }
    else {//zEvent.type == "click"
        if (zEvent.target.selected  &&  _self.optionWasSelected) {
            //-- Double-click, so submit form:
            $(this).parents ("form").submit ();
        }
    }
}

---

---

---

Update: Here's a version that will work on Chrome as well (need to use script injection).
This assumes that the target page does not already have jQuery:

// ==UserScript==
// @name     _Activate double-click on select, submits form
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    none
// ==/UserScript==

function GM_main ($) {
    $("select[name=z_pos_id] option").bind ("mousedown click", handleOptionClicks);

    function handleOptionClicks (zEvent) {
        _self                   = handleOptionClicks;
        _self.optionWasSelected = _self.optionWasSelected || false;

        if (zEvent.type == "mousedown") {
            _self.optionWasSelected = zEvent.target.selected;
        }
        else {//zEvent.type == "click"
            if (zEvent.target.selected  &&  _self.optionWasSelected) {
                //-- Double-click, so submit form:
                $(this).parents ("form").submit ();
            }
        }
    }
}

add_jQuery (GM_main, "1.7.2");

function add_jQuery (callbackFn, jqVersion) {
    jqVersion       = jqVersion || "1.7.2";
    var D           = document;
    var targ        = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    var scriptNode  = D.createElement ('script');
    scriptNode.src  = 'http://ajax.googleapis.com/ajax/libs/jquery/'
                    + jqVersion
                    + '/jquery.min.js'
                    ;
    scriptNode.addEventListener ("load", function () {
        var scriptNode          = D.createElement ("script");
        scriptNode.textContent  =
            'var gm_jQuery  = jQuery.noConflict (true);\n'
            + '(' + callbackFn.toString () + ')(gm_jQuery);'
        ;
        targ.appendChild (scriptNode);
    }, false);
    targ.appendChild (scriptNode);
}