-2

How does one select, or focus, a <select> box using javascript? .select() works fine for selecting inputs with jQuery, but it does nothing for select boxes. Trying to select the currently selected option doesn't work either.

Update: People are misunderstanding the question two ways.

  1. First this is not a duplicate of how to select a text input. As I already stated, the usual method that works for selecting a text box does not work.

  2. I am not trying to retrieve or set the selected index of a select box. I just want the select box in general to be selected, like when you are tabbing through a form.

Update 2:

OK, I figured out what the problem was which makes the question moot. Due to a quirk of testing from the Chrome console, .focus() did nothing, which made me believe it was useless. I guess that is why I had ended up using .select() which visibly worked when I tested from the Chrome console, but didn't work for select boxes. When I tried .focus() from a javascript file then it worked. I guess when the Chrome console is in focus then you can't focus stuff with in the actual page programatically. Lesson learned.

Moss
  • 3,695
  • 6
  • 40
  • 60
  • `selectElement.selectedIndex = 2`? Do you mean checkboxes? – StackSlave Mar 11 '17 at 01:59
  • Samples - html, and script that you have tried would be helpful. – rasmeister Mar 11 '17 at 02:02
  • try setting selectedIndex: https://html.spec.whatwg.org/multipage/forms.html#dom-select-selectedindex – traktor Mar 11 '17 at 02:02
  • I am not trying to choose a option within the select box, I am trying to do the equivalent of jQuery's `.select()` method. Which focuses the select box, like when you are tabbing through a form. – Moss Mar 11 '17 at 02:12
  • Not a duplicate. – Moss Mar 11 '17 at 02:24
  • Why is the question being downvoted? – Moss Mar 11 '17 at 02:34
  • 1
    @Moss it is absolutely a duplicate, use `.focus()`. `.select()` does NOT select a text box at all, it selects the text within it. Even if you can't see that the object is focused it is. Literally google ".focus javascript" and look at the w3schools example changing the element from an anchor to a select box works. – Nick is tired Mar 11 '17 at 02:50
  • @Moss also, `.select()` is JS not jQuery,`.select(callback)` is jQuery and is an event handler, not even related to what you are trying to do, honestly try to use Google before asking why your question is being downvoted – Nick is tired Mar 11 '17 at 03:01
  • @NickA, I did use Google and found no answers, I also found no answers in StackOverflow, that is why I asked the question. Don't be insulting. – Moss Mar 11 '17 at 03:10

3 Answers3

0

I think you're looking for the focus() method.

  • The focus() method is used to give focus to an element (if it can be focused).

Example:

<html>
  <body>
    <select id="mySelect">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
    </select>
    <script>
        function Function() {
           document.getElementById("mySelect").selectedIndex.focus();    
        }
    </script>

  </body>
</html>
Ousmane D.
  • 54,915
  • 8
  • 91
  • 126
0
document.getElementById("mySelect").selectedIndex = "2";

From W3C:

The selectedIndex property sets (or returns) the index of the selected option in a drop-down list.

The index starts at 0.

Note: If the drop-down list allows multiple selections it will only return the index of the first option selected.

Note: The value "-1" will deselect all options (if any).

Note: If no option is selected, the selectedIndex property will return -1.

So, to set it, assign the property selectedIndex to the numeric index of you want to choose.

OR you can use

document.getElementById("mySelect").value = "foo";

and set the value property to the name of the option you want.

You may also want to check out the Select DOM object page on W3C here:

https://www.w3schools.com/jsref/dom_obj_select.asp

0

Hey @Moss if you want to select or focus on a select element, you can use .focus(). I made a demo so you can see it more clearly.

dawchihliou
  • 246
  • 1
  • 5
  • Please read the question again. I updated it. – Moss Mar 11 '17 at 02:40
  • Hey are you saying that you want the – dawchihliou Mar 11 '17 at 02:49
  • I update my answer as well. Focusing on a select element can be done with jquery [`.focus()`](https://api.jquery.com/focus/). But showing the list of options of the select element is trickier and I don't have a quick solution – dawchihliou Mar 11 '17 at 03:09