首页 > 解决方案 > 使用 javascript 在下拉列表中选择答案

问题描述

我对这个 html 代码有一些问题,我需要选择一个特定的鞋码:

<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>

我已经尝试了我在网站上找到的答案,但它不起作用:

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

下拉列表未显示任何更改的值

标签: javascripthtml

解决方案


你的 JavaScript 将是

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

您可以使用自己的索引代替 11。

或者,如果您想按值设置选项,请使用以下代码

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;
                }
            }
        }

推荐阅读