Как изменить текст на основе выбранной опции?

Question

Это, наверное, просто, но я не могу это решить.

Я хочу, чтобы иметь возможность изменять текст абзаца, исходя из того, какая опция выбрана.

HTML

<form action=""> 
<select name="" id=""> 
    <option id="1" value="One">One</option> 
    <option id="2" value="Two">Two</option> 
    <option id="3" value="Three">Three</option> 
</select> 
</form> 
<br /> 
<p>Text</p> 

JQ

$("#1").click(function(){ 
$("p").html("Changed!"); 
}); 

Вот ручка:

https://codepen.io/anon/pen/qNawgv

Answer 1

Вы не можете вызвать опцию элемент, нажав! Все это связано с элементом селектора. Вы проверяете, выбрана ли опция, и элемент selecet автоматически получает значение выбранного элемента option.

<form action=""> 
<select name="" id="slct"> 
    <option id="1" value="One">One</option> 
    <option id="2" value="Two">Two</option> 
    <option id="3" value="Three">Three</option> 
</select> 
</form> 
<br /> 
<p>Text</p> 

JQuery

$('#slct').change(function(){ // when a option is selected 
    //$("p").html($('#slct').val()); // pushs html code in P element 
    $("p").text("Changed!"); 
    /* 
    anyway you should use $.text if you don't have HTML element to push in 
    */ 
});