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
Post a Comment