时间戳

首页 > 解决方案 > 无法使用 JS 循环获取选定的选项

javascript - 无法使用 JS 循环获取选定的选项

问题描述

我正在使用 JS for 循环获得选定的单选按钮，并且需要对选择和选项下拉列表执行相同的操作。我似乎无法确切地弄清楚需要什么语法。

请参阅下面的代码

HTML

    <form name="formeyes">
        <h3>Choose an eye colour</h3>
        Blue <input type="radio" name="myradio" value="Blue" />
        Black <input type="radio" name="myradio" value="Black" />
        Green <input type="radio" name="myradio" value="Green" />
        Grey <input type="radio" name="myradio" value="Grey" />
        Light Brown <input type="radio" name="myradio" value="LightBrown" />
        Dark Brown <input type="radio" name="myradio" value="DarkBrown" />
    </form>


    <div class="select-eyes">
        <h3>Choose an eye colour</h3>
        <select id="formeyes">
            <option type="text" name="myoption" value="eyes">choose eyes</option>
            <option type="text" name="myoption" value="Blue">Blue</option>
            <option type="text" name="myoption" value="Black">Black</option>
            <option type="text" name="myoption" value="Green">Green</option>
            <option type="text" name="myoption" value="Grey">Grey</option>
            <option type="text" name="myoption" value="LightBrown">Light Brown</option>
            <option type="text" name="myoption" value="DarkBrown">Dark Brown</option>
        </select>
    </div>

单选按钮的 JS（正确控制台记录所选值）

<script>
var radioEye = ""

var radios = document.forms["formeyes"].elements["myradio"];
for (var i = 0; i < radios.length; i++) { 
    radios[i].onclick = function() {
        radioEye = this.value;
        console.log(radioEye);
        drawAvatar()
    }
}
</script>

用于选择下拉列表的 JS（我想在其中控制台记录所选选项）

var optionEye = ""

var radios = document.getElementById("formeyes").options;

for (var i = 0; i < radios.length; i++) { 
    radios[i].onchange = function() {
        optionEye = this.value
        console.log(optionEye);
        drawAvatar()
    }
}

有人请帮忙。

标签： javascriptformsfor-loop

解决方案

有几点需要考虑：

A）您不会将事件附加到选项，而是附加到选择本身。

B）您可以使用事件变量。

例如：

var optionEye = ""

var radios = document.getElementById("formeyes");

radios.addEventListener("change", function(event) {
    optionEye = event.target.value;
    console.log(optionEye);
    drawAvatar();
});

事件选项包含一个target属性，该属性指向 HTML 元素，您可以从中获取当前值。

推荐阅读