基于下拉列表的javascript更改div

我有一个下拉列表，有两个选项：

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

选择1
选择2

---

我想将

设置为根据下拉列表中突出显示的选项显示不同的文本。如何执行此操作？

您可以使用

上的onchange事件处理程序执行此操作：

选择1
选择1
//获取所需对象的引用（和）
var list=document.getElementById（'list'）；
var tag=document.getElementById（'tag'）；
//当列表值更改时，设置
list.onchange=函数（）{
tag.innerHTML=this.value；
};

请注意，在上面我已经为select和span元素添加了id属性。这使我能够轻松地在Javascript中获得对它们的引用

对于我的示例来说，在呈现元素之后执行脚本也很重要，否则

document.getElementById

调用将不会返回对它们的引用。通过将脚本移动到处理程序中，可以绕过此限制

---

这是一个有效的例子

您可以使用

上的onchange事件处理程序来执行此操作：

选择1
选择1
//获取所需对象的引用（和）
var list=document.getElementById（'list'）；
var tag=document.getElementById（'tag'）；
//当列表值更改时，设置
list.onchange=函数（）{
tag.innerHTML=this.value；
};

请注意，在上面我已经为select和span元素添加了id属性。这使我能够轻松地在Javascript中获得对它们的引用

对于我的示例来说，在呈现元素之后执行脚本也很重要，否则

document.getElementById

调用将不会返回对它们的引用。通过将脚本移动到处理程序中，可以绕过此限制

---

这是一个有效的例子

这个问题很模糊，但通常你会这样做：

Html:

如果需要更多条件，可以更改几个if语句的三元运算符（

？：

）

---

请注意，我已经向

添加了一个Id。如果您想在每次select由于某种原因发生更改时获得范围，可以避免使用缓存部分

好吧，这个问题很模糊，但通常您会这样做：

Html:

如果需要更多条件，可以更改几个if语句的三元运算符（

？：

）

---

请注意，我已经向

添加了一个Id。如果您想在每次由于某种原因更改select时获取范围，则可以避免使用缓存部分。请尝试使用无效的HTML。试试

。如果你想复制我答案的某个部分，至少你可以更具创造性地使用以下词语：P（我没有生气或其他任何东西）@nicoshine-world-我没有看到你的答案，即使在我发布了我的答案之后。有点奇怪，我们写出来的距离有多近，嗯？伟大的思想都是一样的，或者巧合……可能是巧合。如果你想复制我答案的某个部分，至少你可以更具创造性地写上这样的话：P（我没有疯或任何事）@Nicoshine怪异-我没有看到你的答案，即使在我发布了我的答案之后。有点奇怪，我们写出来的结果有多接近，嗯？伟大的人想法相似，或者巧合……可能是巧合。如果选项值是text

，它似乎不起作用。还是我在做傻事？尝试使用引号

text

，然后记住在

onchange

方法中更改值。它应该可以工作，但不限于数字。如果选项值为text

，则它似乎不起作用。还是我在做傻事？尝试使用引号

text

，然后记住在

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 id="mySelect" name="list" size="1">
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
</select>
<span id="tag"></span>

//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";
}