获取 select class 选项的值

Question

我正在研究 test/quiz，但我无法解决问题。

我喜欢从选项中抓取选定的值并将其打印到结果 p。

 <div class="add">
            <div class="add__container">
                <select class="add__type">
                    <option value="0" id="a01" selected>No</option>
                    <option value="1" id="a02">Ocassionally</option>
                    <option value="2" id="a03">Yes</option>
                </select>
            </div>
        </div>

    <button class="btn" onclick="myValue()">Results</button>
    <p id="result">... </p>

这里是我的 Javascript 代码，我被卡住了：

function myValue(){    
var e = document.getElementById("s01");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

document.getElementById('result').innerHTML = e;

};

Answer 1

我认为您想将所选选项的实际文本放在 innerHtml 而不是选项 DOM 元素中：

document.getElementById('result').innerHTML = text;

Answer 2

也许你想要这个？我在 select.

上添加了 ID“s01”

<div class="add">
    <div class="add__container">
        <select id="s01" class="add__type">
            <option value="0" id="a01" selected>No</option>
            <option value="1" id="a02">Ocassionally</option>
            <option value="2" id="a03">Yes</option>
        </select>
    </div>
</div>

<button class="btn" onclick="myValue()">Results</button>
<p id="result">... </p>
<script>
    function myValue() {
        var e = document.getElementById("s01");
        var value = e.options[e.selectedIndex].value;
        var text = e.options[e.selectedIndex].text;
        document.getElementById('result').innerHTML = text;

    };
</script>

Answer 3

// Unimportant stuff

const $ = document;
$.get = $.getElementById;

$.get('theOptions').addEventListener('change', function(event) {
  // Get the value from the select-element
  $.get('out').innerHTML = 'You selected ' + event.target.value; // Or $.get('theOptions').value
});

<select id="theOptions">
  <option value="o1">Option 1</option>
  <option value="o2">Option 2</option>
  <option value="o3">Option 3</option>
</select>
<span id="out">Nothing selected</span>

Answer 4

试试这段代码。我认为这段代码可以按照您的要求工作。

function myValue(){    
        var select = document.getElementsByClassName("add__type")[0].value;
        document.getElementById('result').innerHTML = select;
};

 <div class="add">
            <div class="add__container">
                <select class="add__type">
                    <option value="0" id="a01" selected>No</option>
                    <option value="1" id="a02">Ocassionally</option>
                    <option value="2" id="a03">Yes</option>
                </select>
            </div>
        </div>

    <button class="btn" onclick="myValue()">Results</button>
    <p id="result">... </p>

something more..

获取 select class 选项的值

Get the value of select class options

html

javascript

select

html-select

getelementbyid