Невозможно получить выбранную опцию, используя цикл JS - PullRequest
Новая
       3

Невозможно получить выбранную опцию, используя цикл JS

1 голос
/ 06 ноября 2019

Я получаю выбранную радиокнопку с циклом JS for, и мне нужно сделать то же самое с выпадающим списком select & options. Я не могу понять, какой именно синтаксис нужен.

См. Код ниже

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()
    }
}

Кто-то, пожалуйста, помогите.

Ответы [ 2 ]

0 голосов
/ 06 ноября 2019

Несколько вещей, которые следует учитывать:

A) Вы не добавляете событие к опциям, а к самому выделению.

B) Вы можете использовать переменную события.

Например: 

var optionEye = ""

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

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

Параметры событий содержат свойство target, которое указывает на элемент HTML, из которого можно получить текущее значение.

0 голосов
/ 06 ноября 2019

Нет, вам не нужно использовать цикл для этого, просто функцию onchange() (javascript) для этого вызовите функцию при изменении и получите выбранное значение. 

function checkValue() {
  var select_ = document.getElementById("Select").value;
  console.log("You selected: " + select_);
}
<select id="Select" onchange="checkValue()">
  <option value="Hello">Hello
  <option value="world">World
</select>
...