jquery - How to pass JavaScript function result to html when using onchange? -


i wonder how place user selected option somewhere in html text. user selection using javascript don't know how pass html.

my current code looks this. html:

<select id="profile" onchange="myfunction()">     <option>one</option>     <option>two</option>     <option>three</option>                               </select> 

javascript:

function myfunction() {     var user_selection = $( "#profile option:selected" ).text();     alert(user_selection); } 

you can use jquery create new element , add dom this:

function myfunction() {     var user_selection = $("#profile option:selected").text();     $('<div>' + user_selection + '</div>').insertafter('#profile'); } 

also note using on* event attributes considered outdated. should use unobtrusive event handlers. you're using jquery, here's how that:

$('#profile').change(function() {      var user_selection = $(this).find('option:selected').text();      $('<div>' + user_selection + '</div>').insertafter(this);  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <select id="profile">      <option>one</option>      <option>two</option>      <option>three</option>                                </select>

i suggest familiarise methods jquery has creating elements in dom around, inside , outside existing elements.


Comments

Popular posts from this blog

java - Jasper subreport showing only one entry from the JSON data source when embedded in the Title band -

serialization - Convert Any type in scala to Array[Byte] and back -

SonarQube Plugin for Jenkins does not find SonarQube Scanner executable -