【问题标题】:select a answer in dropdown with javascript [duplicate]使用javascript在下拉列表中选择答案[重复]
【发布时间】:2021-09-14 00:40:48
【问题描述】:

我对这个 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;

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

【问题讨论】:

  • selectedIndex 属性不像您想象的那样起作用。您需要将此值设置为 index,而不是目标 &lt;option&gt;value。我鼓励您阅读the documentation for this attribute 以获得更全面的解释。
  • 我不明白为什么它不起作用

标签: javascript html


【解决方案1】:

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

【讨论】:

  • 如果我在 chrome 控制台中输入命令 document.getElementById('shoeSize').getElementsByTagName('option')[11].selected = 'selected' 没有任何反应,我不明白,无论我选择什么数字,仍然会选择相同的值
  • 我已经验证了两种选择选项的方法。您在哪个事件上调用这些方法?
  • 例如,如果我输入控制台: var selectObj = document.getElementById('shoeSize'); var valueToSet = "8.5" for (var i = 0; i
  • 放入控制台将不起作用。您需要在某些事件(如 onload 或按钮单击)上调用方法。如果您有特定要求仅在控制台上执行,请修改您的问题。
  • 哦,对不起,我是新手,我不知道,请问控制台中的情况如何?谢谢
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-11-12
  • 1970-01-01
  • 1970-01-01
  • 2016-10-14
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多