javascript - jQuery : change span value on option select -


working on project client... want change value of span of #sandy based on selection choice of dropdown. instance if option text 1 selected, span #sandy say: "this #sandy2", if option text 2 selected, span #sandy "this not #sandy2".

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en""http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <title>sandbox test</title> <script> function checkfield(val) { alert("the input value has changed. new value is: " + val); } </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> = 0; $(document).ready(function () {     $("#clientname").keyup(function () {         $("#pizza").text(i += 1);         var stt = $(this).val();         $("#sandy2").text(stt);     }); }); </script> </head> <body> <p>modify text in input field, click outside field fire onchange.    </p> <table style="width: 300px"> <tr>     <td style="width: 150px">enter text: </td>     <td>      <input type="text" name="txt" id="clientname" value="" onchange="checkfield(this.value)" style="width: 150px"/></td> </tr> <tr>     <td style="width: 150px">selection:</td>     <td> <select name="select1" style="width: 150px" onchange="jsfunction()">             <option value="" disabled selected style="display:none;">choose option!</option>             <option>option text 1</option>             <option>option text 2</option>         </select></td> </tr> </table> <br/> ====================================== <br/> <span id="sandy">this test <span id="sandy2"></span></span> </body> </html> 

give select id, , give each option value:

<select id="selector" name="select1" style="width: 150px" onchange="jsfunction()">         <option value="" disabled selected style="display:none;">choose option!</option>         <option value="1">option text 1</option>         <option value="2">option text 2</option> </select> 

then when select changed, can selected value this:

var selected = $('#selector option:selected').val(); 

then in change handler, or keyup handler, can selected value , things accordingly.


additionally, bad practice mix inline handlers jquery.

remove onchange line

<select id="selector" name="select1" style="width: 150px" onchange="jsfunction()"> 

and add this:

$(function() {   $('#selector').on('change', jsfunction); }); 

Comments

Popular posts from this blog

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

php - render data via PDO::FETCH_FUNC vs loop -

The canvas has been tainted by cross-origin data in chrome only -