get selected option text

JavaScript performance comparison

Test case created by Simon Harte

Info

http://stackoverflow.com/questions/196684/jquery-get-specific-option-tag-text

Preparation code

<form action="" method="post">
        <div class="form-line">
                <label for="more-insertions-level">Level</label>

                <div class="input">
                        <span class="selected"></span>
                        <select name="level" id="more-insertions-level">
                                <option value="1" selected="selected">Berufseinsteiger</option>
                                <option value="2">Berufserfahren</option>
                                <option value="3">Chef</option>
                        </select>
                </div>
        </div>
        <div class="form-line">
                <label for="more-insertions-position">Funktion</label>

                <div class="input">
                        <span class="selected"></span>
                        <select name="position" id="more-insertions-position">
                                <option value="1" selected="selected">Netz und IT</option>
                                <option value="2">Sales</option>
                                <option value="3">Human Resources</option>
                        </select>
                </div>
        </div>
        <div class="form-line">
                <label for="more-insertions-location">Level</label>

                <div class="input">
                        <span class="selected"></span>
                        <select name="location" id="more-insertions-location">
                                <option value="1" selected="selected">Zürich</option>
                                <option value="2">Luzern</option>
                                <option value="3">St.Gallen</option>
                        </select>
                </div>
        </div>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<script>
Benchmark.prototype.setup = function() {
    var $select = $('select');
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
filter children
$select.children().filter(':selected');
pending…
children through css selector
$select.children(':selected');
pending…
declared children filter
$select.children('option').filter(':selected');
pending…
CSS selector only
$($select.selector + ' option:selected');
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

1 comment

mahesh commented :

I would like to make text as a color when my input text is connect to Database, that would be color when mouse over, or when text , matches the highleted would be color. please if know the answer share with me.

Add a comment