0

我需要设置一个简单的列表框，在按下按钮后在同一页面上显示结果。例如，下面的代码显示了 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/

4

1 回答 1

2

尝试使用 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>

演示

于 2013-10-31T15:25:07.087 回答