JS代码：

<script>
  function changeFunc(choice){
    var x = choice.value;
    document.write("You choose " + x + " option");
  }
</script>

HTML：

<div id="test">
  <h2>Choose one</h2>
  <select onchange="changeFunc(this)">
   <option>1</option>
   <option>2</option>
   <option>3</option>
   <option>4</option>
 </select>
</div>

Answer 1

不要使用document.write。相反，在html中创建一个div并将结果写入该div。

HTML：

<div id='result'></div>

使用Javascript：

function changeFunc(choice)
{
   var x = choice.value;
   document.getElementById("result").innerHTML = "You choose " + x + " option";
}

Answer 2

而不是使用document.write使用node.innerHTML..like this

 <head>
   <script>    
      function changeFunc(choice){
        var x = choice.value;
       //document.write("You choose " + x + " option");
        document.getElementById("result").innerHTML = "You choose " + x + " option";
    }
   </script>
 </head>
 <body>
   <div id="test">
     <h2>Choose one</h2>
     <select onchange="changeFunc(this)">
       <option>1</option>
       <option>2</option>
       <option>3</option>
       <option>4</option>
     </select>
  </div>
<div id="result"></div>

write（）方法主要用于测试：如果在HTML文档完全加载后使用它，它将删除所有现有的HTML。

注意：当此方法不用于测试时，它通常用于将一些文本写入document.open（）方法打开的输出流。

Answer 3

你可以定义一个新的DIV，然后通过innerHTML更新它。

这是一个工作示例：

＆＃13;

	var displayDiv = document.getElementById('displayResult');

changeFunc =   function(choice){
    var x = choice.value;
    displayDiv.innerHTML = "you choose" + x;

  }

＆＃13;

<div id="test">
  <h2>Choose one</h2>
  <select onchange="changeFunc(this)">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>
<div id="displayResult"></div>

＆＃13;

https://jsfiddle.net/u1rfwcf1/3/

如何在同一页面上显示JavaScript中的选项结果

JS代码：

HTML：

3 个答案: