Javascript изменение Div на основе выпадающего списка

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>. Вы можете избежать части кеширования, если хотите получить интервал каждый раз, когда по каким-либо причинам выбираются изменения.

Answer 2

Вы можете сделать это с помощью обработчика событий OnChange на вашем <select>:

<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> 

Обратите внимание, в приведенном выше, что я добавил идентификатор атрибуты как селектов и пролетных элементов. Это позволяет мне легко получить ссылку на них в Javascript.

Для моего примера также важно, чтобы сценарий выполнялся после визуализации элементов, иначе вызов document.getElementById не вернет ссылку на них. Вы можете обойти это ограничение, переместив скрипт в обработчик window.onload.

Работает simple example.