Dropdown box - onchange and onselect
Question
I want help, i am very new to html..
On selecting option from dropdown menu, I want html to put the values in word.. eg When I select "1" from drop down, it must show "one" When I select "2' from drop down, it must show "two"
How to do that??
<HTML>
<Table border=10>
<TR>
<TD>Select Number</TD>
<TD><Select>
<option>1</option>
<option>2</option>
<option>3</option>
</Select></TD>
</TR>
<tr>
<td>In Words</td>
<td><input type="text" readonly></td>
</tr>
</Table>
</HTML>
Please make a script and show me...
2 answers
solution1
2 ACCPTED 2015-03-04 08:01:30
If I understand what you want, you'll need some javascript to find what you selected, and take that 'string' and shove it in an element for the user to see.
Here is a working example. Try making one these next time you ask a question. Welcome to Stack Overflow.
http://jsfiddle.net/sheriffderek/6vp5Lskn/
HTML
<select name='my_select' id='my_select'>
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option 3</option>
<option value='4'>Option 4</option>
<option value='5'>Option 5</option>
</select>
<div id="outcome">
You have selected: <span></span>
</div>
javascript (jQuery)
var selectedOption; // define this variable
// when the select is changed...
$('#my_select').on('change', function() {
// get the option that was selected
selectedOption = $( "#my_select option:selected" ).text();
// put the option in the place you want it
$('#outcome span').html(selectedOption);
});
solution2
2 2015-03-04 08:08:48
A non-jQuery solution :
Firstly, give your select- and input-tags id's, and your options values (value=""). Then add a onchange=""-listener in the select-tag and make a function that carries out what you want to do (ie checking the selected value and displaying it in your input field), like so:
function showValue() { var x = document.getElementById("mySelect").value; document.getElementById("mySelection").value = "You selected: " + x; }
<Table border=10> <tr> <td>Select Number</td> <td><Select onchange="showValue()" id="mySelect"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </Select></td> </tr> <tr> <td>In Words</td> <td><input type="text" id="mySelection"></td> </tr> </Table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.