I m trying to simulate a click on a dropdown list element, so first click drop show the list then select third option

i used many js fonction exemple : document.querySelectorAll('#selectDomain > option:nth-child(2)')[0].click();

But no one work

here is the source code :

<div  data-select2-id="6">
                    <div >
                        <select id="selectDomain" name="domain"  data-live-search="true" data-select2-id="selectDomain" tabindex="-1" aria-hidden="true">
                                                                <option value="actu-xxo.xxu" data-select2-id="2">
                                    actu-xxo.xx - 185.246.44.131 - IP Personnalisée
                                </option>
                                                                <option value="actu-xxo.xx" data-select2-id="11">
                                    actu-xxo.xx - 106.234.167.241 - IP Personnalisée
                                </option>
                                                                <option value="actu-xxo.xxu" data-select2-id="12">
                                    actu-xxo.xx - 76.40.10.137 - IP Personnalisée
                                </option>
                                                                <option value="bsededket-news.x" data-select2-id="13">
                                    bsededket-news.xx - 76.40.10.97 - IP Personnalisée
                                </option>
                                                                                                                            </select><span  dir="ltr" data-select2-id="1" style="width: 695px;"><span ><span  role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-selectDomain-container"><span  id="select2-selectDomain-container" role="textbox" aria-readonly="true" title="
                                    actu-xxo.xx - 186.246.44.131 - IP Personnalisée
                                ">
                                    actu-xxo.xx - 165.246.44.131 - IP Personnalisée
                                </span><span  role="presentation"><b role="presentation"></b></span></span></span><span  aria-hidden="true"></span></span>
                    </div>
                </div>

CodePudding user response：

here is some jquery, not sure how to do this in normal javascript

this will select the 2nd child (nth-child) and then trigger the change event

$('#selectDomain').find('option:nth-child(2)').prop('selected',true).trigger('change'); 

get jquery here

test via jsfiddle here