0

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

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

4 回答 4

3

使用以下内容获取所选选项的文本:

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

然后,要将值添加到divid text,请使用:

document.getElementById("text").innerHTML = selectedText;

如果要在每次选项更改时反映所选值,则需要将onchange事件附加到select,结合上面的代码结果如下:

var select = document.getElementById("dropdownselect");
select.onchange = function () {
  var selectedText = this.options[this.selectedIndex].text;
  document.getElementById("text").innerHTML = selectedText;
};​

这是一个有效的演示

于 2012-09-01T02:28:41.543 回答
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>​​​​​​​​​​​​​​
于 2012-09-01T02:29:33.283 回答
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 -->
于 2012-09-01T02:26:09.587 回答
0
var selectBox = document.getElementById("dropdownselect"),
    textDiv = document.getElementById("text");
textDiv.innerText = selectBox.options[selectBox.selectedIndex].text;

但我也建议使用 jQuery。

于 2012-09-01T02:30:29.550 回答