JavaScript和HTML-如何将组合框的选定选项的值放入跨度？

Question

imagine I have this combobox

<select name="simulate_option" id="simulate_opt">
<option value="EUR" selected="selected">EUR</option>
<option value="USD">USD</option>
<option value="CHF">CHF</option>
<option value="GBP">GBP</option>
</select>   

How do I put the value of the selected option, automaticly, into this span?

<span id="span_combo"><span/>

Answer 1

You can use jQuery to put an event listener on the select box. You can assign an on change event & on change of select you can read the value of the select & put it inside the span you need.

WORKING DEMO - http://codepen.io/nitishdhar/pen/CFjpz

Use this -

$(document).ready(function(){
  $('#simulate_opt').change(function(){
    var value = $(this).val();
    $('#span_combo').text(value);
  });
});

You can also learn how to start using jQuery in your work. Look at this - http://learn.jquery.com/about-jquery/how-jquery-works/

Answer 2

If you use jQuery:

$("#simulate_opt").change(function(){
    $("#span_combo").html($(this).val());
});

http://jsfiddle.net/7Kudw/

Non jQuery way:

Call function when changes value:

<select name="simulate_option" id="simulate_opt" onchange="test();return false;">
     <option value="EUR">EUR</option>
     <option value="USD">USD</option>
     <option value="CHF">CHF</option>
     <option value="GBP">GBP</option>
</select>   
<span id="span_combo"><span/>

JS:

function test(){
    document.getElementById("span_combo").innerHTML = document.getElementById("simulate_opt").value;
}

http://jsfiddle.net/LSsNU/