I'm trying to read a select(dropdown) box from an HTML form along with all its options.
Can you please guide me as to how this can be achieved.
My core requirement is to be able to read a select element with all its option and store it in some variable/node using one JS function. Use another JS function to pick the node and convert the values from node back to the options of select box.

We can probably make use of jQuery as well, provided it is supported by IE6.


Edited by nikk8a: n/a

6 Years
Discussion Span
Last Post by Barrett1
<!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">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
//When dom is ready
//onChange function
$("#dropdown").change(function() {

//Get th selected option text or to get value use
//var items=$("#dropdown option:selected").val();
var option=$("#dropdown option:selected").text();

//Get each option
$("#dropdown option").each(function(){

//Get each option text to get the value use
//var all_opttions=$(this).val(); 
var all_options=$(this).text();

//Append all_options variable to #item_selected div
$("#option_selected").append(all_options+"<br />");

//Append selected option to #item_selected div
$("#option_selected").append(option+"Seleted from list <br />");
<select name="dropdown" id="dropdown"> 
<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> 

<!--Display option selected and all options in select-->
<div id="option_selected"></div>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.