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.


<!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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.