Question 207147 in Html Question posted in
Some basic documentation can be found here.

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

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.

Tags:

2

Answers


  1. 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."
    Login or Signup to reply.
  2. 0

    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']);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search