时间戳

首页 > 解决方案 > 如何在html的选择标签中创建onload java脚本选定值

javascript - 如何在html的选择标签中创建onload java脚本选定值

问题描述

我创建了一个选择列表。如何onload使用 javascript 创建函数。打开页面时选择的值为1。那个时候我需要展示no1 div。怎么做？

function olresult(e) {
  var selectedValue = document.getElementById("sel").value;

  if (selectedValue == '1') {
    document.getElementById('no1').style.display = 'none';
    document.getElementById('no2').style.display = 'block';

  } else {
    document.getElementById('no1').style.display = 'block';
    document.getElementById('no2').style.display = 'none';
  }
}
<select id="sel" onload="olresult(event)">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<div id="no1" style="display:none;">
  <p>123</p>
</div>
<div id="no2" style="display:none;">
  <p>aaaaa</p>
</div>

标签： javascripthtml

解决方案

<select>元素不适用于onload，您希望在选择更改时触发事件。您需要更改onload为onchange.

如果您需要在页面加载时发生某些事情，您可以添加onload到<body>元素中，或者更好的是只包含您的脚本以在 HTML 文档的末尾运行。此外，您也可以display:none从 HTML 中删除。

function olresult(e) {
  var selectedValue = document.getElementById("sel").value;

  if (selectedValue == '1') {
    document.getElementById('no1').style.display = 'none';
    document.getElementById('no2').style.display = 'block';

  } else {
    document.getElementById('no1').style.display = 'block';
    document.getElementById('no2').style.display = 'none';
  }
}
<select id="sel" onchange="olresult(event)">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

<div id="no1" style="display:none;">
  <p>123</p>
</div>
<div id="no2">
  <p>aaaaa</p>
</div>

推荐阅读