Question

我需要设置一个简单的列表框，在按下按钮后在同一页面上显示结果。例如，下面的代码显示了每天7天的时间列表。现在，当按下按钮时，我弹出一个“该页面”**。com“说：7-9”。

如何在没有弹出窗口的情况下在按钮下方显示“7-9”？

<script>
function displayResult()
{
var x=document.getElementById("mySelect").selectedIndex;
alert(document.getElementsByTagName("option")[x].value);
}
</script>
</head>
<body>

<form>
Select a day:
<select id="mySelect">
  <option value="8-8">Monday</option>
  <option value="7-9">Tuesday</option>
  <option value="7-9">Wednesday</option>
  <option value="7-9">Thursday</option>
  <option value="7-10">Friday</option>
  <option value="10-10">Saturday</option>
  <option value="10-5">Sunday</option>
</select>
</form>    
<button type="button" onclick="displayResult()">Display result</button>

http://jsfiddle.net/78NKt/

Answer 1

尝试使用insertBefore和function.call这样的方式将函数集中的上下文设置为元素本身的上下文。另外，您可以使用element.value（更短）来获取select的值：

   function displayResult() {
        var x = document.getElementById("mySelect");
        this.parentNode.insertBefore(document.createTextNode(x.value), this.nextSibling);
    }

和

 <button type="button" onclick="displayResult.call(this)">Display result</button>

<强> Demo

单击按钮后显示下拉列表选定值的结果

1 个答案: