In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > selection and ranges > methods > select (controlRange, TextRange)

select method (controlRange, TextRange)

Browser support:


		10.5

Selects all text or controls that is included in the current TextRange or controlRange object.

The select method can be useful for highlighting some text to emphasize a find result or for the execCommand method, because the execCommand method works on selections.

Syntax:

object.select ( );

You can find the related objects in the Supported by objects section below.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the select method to select an element:

<head>
    <script type="text/javascript">
        function SelectDiv () {
            var div = document.getElementById ("myDiv");
            if (document.body.createTextRange) {
                var range = document.body.createTextRange ();
                range.moveToElementText (div);
                range.select ();
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    <div id="myDiv">Use the button below to select this text.</div>
    <br /><br />
    <button onclick="SelectDiv ()">Select</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates a cross-browser solution for finding text within a page:

<head>
    <script type="text/javascript">
        function FindNext () {
            var str = document.getElementById ("findField").value;
            if (str == "") {
                alert ("Please enter some text to search!");
                return;
            }

            var supported = false;
            var found = false;
            if (window.find) {        // Firefox, Google Chrome, Safari
                supported = true;
                    // if some content is selected, the start position of the search 
                    // will be the end position of the selection
                found = window.find (str);
            }
            else {
                if (document.selection && document.selection.createRange) { // Internet Explorer, Opera before version 10.5
                    var textRange = document.selection.createRange ();
                    if (textRange.findText) {   // Internet Explorer
                        supported = true;
                            // if some content is selected, the start position of the search 
                            // will be the position after the start position of the selection
                        if (textRange.text.length > 0) {
                            textRange.collapse (true);
                            textRange.move ("character", 1);
                        }

                        found = textRange.findText (str);
                        if (found) {
                            textRange.select ();
                        }
                    }
                }
            }

            if (supported) {
                if (!found) {
                    alert ("The following text was not found:\n" + str);
                }
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    <div>LaLa, Lala, laLa , lala, lalala, tralala, some other text</div>
    <br />
    <input type="text" id="findField" value="lala" size="20" />
    <button onclick="FindNext ();">Find!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the select method and the controlRange collection:

<head>
    <script type="text/javascript">
        function Init () {
                // the 'multipleSelection' command throws an exception in Opera
            try {
                    // enables multiple selection in Internet Explorer
                document.execCommand("multipleSelection", false, true);
            }
            catch (e) {};
        }

        function SelectButtons () {
            var editor = document.getElementById ("editor");
            if (editor.createControlRange) {        //Internet Explorer
                var buttons = editor.getElementsByTagName ("button");

                var controlRange = editor.createControlRange ();
                for (var i = 0; i < buttons.length; i++) {
                    controlRange.add (buttons[i]);
                }

                controlRange.select ();
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body onload="Init ();">
    <div id="editor" contenteditable="true" style="background-color:#e0f0e0;">
        <button>Sample button</button>
        <br /><br />Sample text inside the editor.<br /><br />
        <button>Another button</button>
    </div>
    <br /><br />Click on the button below to select all buttons with the controlRange collection.<br /><br />
    <button onclick="SelectButtons ();">Select all buttons inside the editor!</button>
</body>