Geek asks and answers

Choosing <option> from <select> from contents of chrome script extension

I am hopelessly trying to fire the change () event from the contents of a chrome script. I went through Google sites and posts, but nothing works.

here is a description of what I'm trying to achieve

consider the following webpage (available through http://www.gilzu.com/TFF/select.html if anyone is so kind as to help):

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#woot').die('change');
            $('#woot').live('change', function () {
                $('#description').text(jQuery('#woot').val());
                });
            console.log("window ready");       


            $("#meh").click(function() {
                $('#woot').val(15);
                $('#woot').change();
            });

            $('#woot').val(21);
            $('#woot').change();
        });
    </script>
</head>
<body>
    <p>
        <select id="woot">
            <option id="Option1" value="15">a</option>
            <option id="Option2" value="16">b</option>
            <option id="Option3" value="17">c</option>
            <option id="Option4" value="18">d</option>
            <option id="Option5" value="19">e</option>
            <option id="Option6" value="20">f</option>
            <option id="Option7" value="21">g</option>
        </select>
    </p>

    <p id="description"></p>
    <p><input type="button" id="meh" /></p>
</body>
</html>

what to do: 1. at start, change () starts and updates the selection field to 21 and shows the correct value in the div. 2. By pressing the #meh button, change the selection field to 15, fire the change () event, which shows the correct value on the screen.

not surprising yet.

so I'm heading to the script content via:

$(document).ready(function () {
                $('#woot').val(17);
                $('#woot').change();
                });

so that the select tag is updated, but the change () event does not fire.

- :

$(document).ready( function() {
    $("#meh").click();
});

, !

, , , js :

$(document).ready( function() {
    var x = $("<script type='text/javascript' />");
    $(x).text("$('#woot').val(18); $('#woot').change();");
    $("head").append(x);        
});

: , .

: 1. , #meh , select(). , . 2. attr(), prop(), val() , . 3. change(), ('change') selectIndex , . 4. js 5. focus() , () , .

+5
2

JQuery, JQuery - ....

var selections = document.querySelector('#woot');

selections.value = 17;

var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", true, true);
selections.dispatchEvent(evt);
+10

script. script, script, , eval() . , CSP.

var RunInThisContext = function(c){ try{
    var code = document.createTextNode(c);
    var script = document.createElement('script');
    script.type='text/javascript';
    script.language='javascript';
    script.appendChild(code);
    try{document.body.appendChild(script);}catch(e){document.head.appendChild(script);}

}catch(e){ console.error('ERROR: '+e); }};

:

RunInThisContext('('+(function(){ 
     $('select').change();
}).toString()+'()); ');

, . jQuery, .

+1

More articles:


All Articles