How to change what is selected in a HTML select element using JavaScript?

Question

I want to make select an element using Javascript in this HTML-select element

<div class="vb-fg-field-input ">
  <select class="slimselect required" name="tx_vbformgenerator_vb_formgenerator[Anrede]" tabindex="-1" data-ssid="ss-2638" style="display: none;" data-ddg-inputtype="unknown">
    <option value=" ">not specified</option>
    <option value="1">Mrs.</option>
    <option value="2">Mr.</option>
    <option value="5">Mx.</option>
  </select>
  <div class="ss-2638 ss-main slimselect required" style="">
    <div class="ss-single-selected">
      <span class="placeholder">not specified</span>
      <span class="ss-deselect ss-hide">x</span>
      <span class="ss-arrow">
        <span class="arrow-down"></span>
      </span>
    </div>
    <div class="ss-content">
      <div class="ss-search ss-hide">
        <input readonly="" type="search" placeholder="Search" tabindex="0" aria-label="Search">
      </div>
      <div class="ss-list">
        <div class="ss-option ss-disabled ss-option-selected" data-id="84420967">not specified</div>
        <div class="ss-option" data-id="78147293">Mrs.</div>
        <div class="ss-option" data-id="65028532">Mr.</div>
        <div class="ss-option" data-id="13286904">Mx.</div>
      </div>
    </div>
  </div>
</div>

I read this question, How do I programatically select an HTML option using JavaScript? , especially this answer https://stackoverflow.com/a/41969836/1802826 , but none of the suggested solutions seem to work for me.

I have tried this JS

document.getElementsByClassName('slimselect')[0].value = "Mr."

which returns

<- 'Mr.'

.

document.getElementsByClassName('slimselect')[0].querySelectorAll('option')[2].selected = "Mr."

which returns

<- 'Mr.'

document.getElementsByClassName('slimselect')[0].querySelector('option')[2]

which returns

<- Undefined

and multiple variations of these.

How do I, using JavaScript (preferably a "oneliner"), change what is selected here, either based on index (1-4), the value attribute (1, 2, 5) or the element string (not specified, Mrs., Mr. or Mx.)?

Note that I want to do it from the browser console, because I will later on wrap in an AppleScript that controls a browser. I am not gonna use it in a webpage.

You are setting the value to match the label, for the option `"Mr."`, the value is `"2"` — DBS, Jul 13 '23 at 16:17
`[elementReference].selected = true;` (for JS property approach). `[elementReference].setAttribute("selected", "selected")` (for HTML attribute approach). — Scott Marcus, Jul 13 '23 at 16:49
[`selected` is a boolean](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#selected) — epascarello, Jul 13 '23 at 16:51
Seems like you are using a third party control from the class names. You probably should be using its api to set the selected item and not the DOM. — epascarello, Jul 13 '23 at 16:55
@epascarello Not sure if your comment was in response to mine. If so, it is suggested to provide Boolean attributes with a value equal to the name of the attribute in cases where specifying a value is either required or makes the code more readable. — Scott Marcus, Jul 13 '23 at 16:58
@ScottMarcus It was just a comment on OP using a random string. And in the end it does not matter since it is a 3rd party component and updating the select is meaningless when the script does not know a change was made. Classic onchange does not fire when JS sets the value. — epascarello, Jul 13 '23 at 17:21

epascarello · Answer 1 · 2023-07-13T17:20:54.150

The control is a third party script so setting the value/index with just the DOM select is not going to notify the JavaScript something changed. JavaScript does not trigger events when you update the value/selectedIndex so you need to trigger events for it to pick up the change you made. You do that with dispathEvent.

const sel = document.querySelector('.slimselect');
sel.selectedIndex = 2;
sel.dispatchEvent(new Event('change'));

or you use their api to set it

const sel = document.querySelector('.slimselect');
sel.slim.setSelected(['2']);

score 0 · Answer 2 · answered Jul 13 '23 at 16:12

0

You can find the <option> with the specified text, then set the <select> element's selectedIndex.

const textToSelect = 'Mr.';
const select = document.querySelector('.slimselect');
select.selectedIndex = [...select.options].findIndex(o => o.text === textToSelect);

<select class="slimselect required">
  <option value=" ">not specified</option>
  <option value="1">Mrs.</option>
  <option value="2">Mr.</option>
  <option value="5">Mx.</option>
</select>

If you already know the index of the option to choose, you can directly set it:

document.querySelector('.slimselect').selectedIndex = 2;

If you know the value of the option to choose:

document.querySelector('.slimselect').value = '2';
// value of <option> with text of "Mr."

answered Jul 13 '23 at 16:12

Unmitigated

76,500
11
62
80

I know the index or value I want to select so I tried with your last two suggestions - but the select element is not updated when I run these snippets in the console (and as a consequence, the form this select belongs to is not valid and can't be submitted). Do you know why? – d-b Jul 13 '23 at 16:17
@d-b Can you provide a [mre]? It works in the example snippet, so there must be something else affecting it. – Unmitigated Jul 13 '23 at 16:20
It seems to be just a visual glitch, the form is accepted, despite that this select element still appears unselected. – d-b Jul 13 '23 at 16:35
@d-b With the SlimSelect library, you should call `.setSelected('value')` on the SlimSelect instance. – Unmitigated Jul 13 '23 at 16:45
`` should be: `` otherwise the value of that option would be a space when selected. – Scott Marcus Jul 13 '23 at 16:54
It is not my web page. I script a browser to use this webpage, hence my question. – d-b Jul 13 '23 at 17:03

How to change what is selected in a HTML select element using JavaScript?

2 Answers2