如何从选择的HTML下拉菜单中提取值?

时间:2012-09-01 02:22:36

标签: javascript html css

如何在上方的div中显示所选的选项名称?如果用户选择了蓝色,我希望蓝色显示在上面。

<div id='text"> selection goes here</div>
<select id="dropdownselect">
<option> Red </option>
<option> White </option>
<option> Blue </option>
</select>

4 个答案:

答案 0 :(得分:3)

使用以下命令获取所选选项的文本:

var select = document.getElementById("dropdownselect");
var selectedText = select.options[select.selectedIndex].text;

然后,要将值添加到ID为div的{​​{1}},请使用:

text

如果您想在每次更改选项时反映所选值,您需要将document.getElementById("text").innerHTML = selectedText; 事件附加到onchange,并结合上述代码导致以下结果:< / p>

select

这是一个有效的 DEMO

答案 1 :(得分:1)

只需添加onchange javascript事件:

<div id="text"> selection goes here</div>
<select id="dropdownselect" onchange="document.getElementById('text').innerHTML = this.options[this.selectedIndex].text;">
    <option> Red </option>
    <option> White </option>
    <option> Blue </option>
</select>​​​​​​​​​​​​​​

答案 2 :(得分:0)

您应该使用javascript框架使其更容易。我个人使用jQuery,在这种情况下获取值的javascript是:

$("#dropdownselect").val()

您可以使用以下命令自动更改:

<select id="dropdownselect" onChange="$('#text').text($(this).val());">

MooTools或以前没有使用的其他框架也提供类似的功能。

jQuery可以通过以下方式获得:

<script src="jquery.js"><!-- assuming you have a jquery file at this location -->

答案 3 :(得分:0)

var selectBox = document.getElementById("dropdownselect"),
    textDiv = document.getElementById("text");
textDiv.innerText = selectBox.options[selectBox.selectedIndex].text;

但我也建议使用jQuery。