Question

我有一个包含2个选项的下拉列表：

<select name="list" size="1">
   <option value=1>Option 1</option>
   <option value=2>Option 2</option>
</select>

我想设置<span id=tag></span>以显示不同的文本，具体取决于下拉列表中突出显示的选项。我怎么能这样做？

Answer 1

嗯，这个问题很模糊，但一般来说你会做这样的事情：

HTML：

<select id="mySelect" name="list" size="1">
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
</select>
<span id="tag"></span>

使用Javascript：

//cache the select and span elements
var mySelect = document.getElementById("mySelect"),
    tag = document.getElementById("tag");

//when it changes
mySelect.onchange = function() {
       //change the tag innerHTML checking the selected value of the select
       tag.innerHTML = mySelect.value === "1" ? "some text" : "some other text";
}

如果您需要更多条件，可以为几个if语句更改三元运算符（? :）。

请注意，我已向<select>添加了ID。如果您希望在每次选择因某种原因而更改时获得范围

，则可以避免缓存部分

Answer 2

您可以使用<select>上的onchange事件处理程序执行此操作：

<select name="list" id="list">
  <option value="1">Option 1</option>
  <option value="1">Option 1</option>
</select>

<span id="tag"></span>

<script>
  // Get references to the objects you need (<select> and <span>)
  var list = document.getElementById('list');
  var tag = document.getElementById('tag');

  // When the list value changes, set the innerHTML of the <span>
  list.onchange = function() {
    tag.innerHTML = this.value;
  };
</script>

请注意，我在select和span元素中添加了id属性。这允许我在Javascript中轻松获得对它们的引用。

对于我的示例而言，在呈现元素之后执行脚本也很重要，否则document.getElementById调用将不会返回对它们的引用。您可以通过将脚本移动到window.onload处理程序来解决此限制。

这是simple example的工作原理。

javascript根据下拉列表更改div

2 个答案: