select a answer in dropdown with javascript

Question

i have some issues with this html code, and i need to select a specific shoesize :

<select name="shoeSize" id="shoeSize" autocomplete="off" class="ncss-ncss-select-menu fs-block css-1bxej0k erx5h8s0" aria-required="false" aria-describedby="shoeSize-select-aria-description">


    <option hidden="" data-testid="hidden-option" disabled="" value="" aria-hidden="true">Pointure</option>
<option value="4">EU 36</option>
<option value="4.5">EU 36.5</option>
<option value="5">EU 37</option>
<option value="5.5">EU 38</option>
<option value="6">EU 38.5</option>
<option value="6.5">EU 39</option>
<option value="7">EU 40</option>
<option value="7.5">EU 40.5</option>
<option value="8">EU 41</option>
<option value="8.5">EU 42</option>
<option value="9">EU 42.5</option>
<option value="9.5">EU 43</option>
<option value="10">EU 44</option>
<option value="10.5">EU 44.5</option>
<option value="11">EU 45</option><option value="11.5">EU 45.5</option><option value="12">EU 46</option>
<option value="12.5">EU 47</option>
<option value="13">EU 47.5</option>
<option value="13.5">EU 48</option>
<option value="14">EU 48.5</option>
<option value="14.5">EU 49</option>
<option value="15">EU 49.5</option>
<option value="16">EU 50.5</option>
<option value="17">EU 51.5</option><option value="18">EU 52.5</option></select>

i have tried answers i found on the website but it does not work like :

document.getElementById("shoeSize").selectedIndex =5;
document.getElementById(".shoeSize").value=5;
document.getElementById("shoeSize").value = 5;

the dropdown does not show any values changed

The `selectedIndex` property does not function as you seem to think it does. You need to set this value to an *index*, not the target ` — esqew, Jul 02 '21 at 02:05

Amit Verma · Answer 1 · 2021-07-02T02:11:33.967

0

your JavaScript will be

 function selectOptionByIndex() {
            document.getElementById('shoeSize').getElementsByTagName('option')[11].selected = 'selected'
        }

you can use your own index in place of 11.

Or if you want to set option by value then use below code

function setSelectedValue() {
            var selectObj = document.getElementById('shoeSize');
            var valueToSet = "8.5"
            for (var i = 0; i < selectObj.options.length; i++) {
                if (selectObj.options[i].value == valueToSet) {
                    selectObj.options[i].selected = true;
                    return;
                }
            }
        }

edited Jul 02 '21 at 02:11

answered Jul 02 '21 at 02:05

Amit Verma

2,450
2
8
21

i don't get it if i enter the command document.getElementById('shoeSize').getElementsByTagName('option')[11].selected = 'selected' in the chrome console nothing happens, the same value is still selected whatever number i choose – Mehdi Jul 02 '21 at 02:12
I have verified both methods for selecting option. On which event are you calling these methods ? – Amit Verma Jul 02 '21 at 02:18
for instance if i put in the console : var selectObj = document.getElementById('shoeSize'); var valueToSet = "8.5" for (var i = 0; i < selectObj.options.length; i++) { if (selectObj.options[i].value == valueToSet) { selectObj.options[i].selected = true; } }. it returns always undefined – Mehdi Jul 02 '21 at 02:21
putting in console will not work. You need to call the methods on some event like onload or on button click. If you have specific requirement to do only on console then modify your question. – Amit Verma Jul 02 '21 at 02:23
oh sorry im new i did not know, how would it be in the console please? thank you – Mehdi Jul 02 '21 at 02:25
For console please check : https://stackoverflow.com/questions/9054870/calling-a-javascript-function-from-console/42320912 – Amit Verma Jul 02 '21 at 02:26
are you sure it works, this affects nothing the webpage i just tried – Mehdi Jul 02 '21 at 05:58

select a answer in dropdown with javascript

1 Answers1