Question on List/Menu drop down

@cybersipApr 17.2007

Hello,
I was just wondering if its possible through javascript to add any data manually to a dropdown select box. For e.g i have this html code for select menu.
<select name=”select4″ class=”body”>
<option value=”1″>–Select–</option>
<option value=”2″>Read</option>
<option value=”3″>Unread</option>
</select>

The user can select the option of his choice. Now if a user wants to add another option of his choice than is it possible through javascript??

Please help me out.

to post a comment

JavaScript

4 Comments(s) _↴

@ricpApr 17.2007 — #Yes and there are two main ways to do it, although I am going to amend your HTML just slightly to give the <select> an id to make things easier.

[code=html]<select name="select4" class="body" id="mySelect">[/code]

Now the two methods..

older:

<i>
 </i>var oSelect = document.getElementById("mySelect");
 var oOption = new Option();
 oOption.value = "some value";
 oOption.text = "some text";
 oSelect.options.add(oOption);

newer method:

<i>
 </i>var oSelect = document.getElementById("mySelect");
 var oOption = document.createElement("option");
 oOption.value = "some value";
 oOption.appendChild(document.createTextNode("some text"));
 oSelect.appendChild(oOption);

The newer method is using DOM methods which is probably the preferred method, although in essence there is very little difference between the two and the output is identical. The newer method may look a little more work, but it is the more logical (imo, anyway);

One thing to note, when doing the DOM method IE has a bug (does it? Imagine that!) where applying the .text property it doesn't add the text, other browsers take it fine and it's a totally valid property, so I create a text node and append it into the <option> instead.

Both the methods append the option to the end of the list. If you wanted it somewhere else in the older method you could use the index value of the add method, like so:

[CODE]oSelect.options.add(oOption, 0);[/CODE]

For the DOM method you would need to use the insertBefore instead of an appendChild like so:

[CODE]oSelect.insertBefore(oOption,oSelect.getElementsByTagName("option")[0]);[/CODE]

Both of those would place the option first on the list.

Hope this helps.

@cybersipauthorApr 17.2007 — #Yes and there are two main ways to do it, although I am going to amend your HTML just slightly to give the <select> an id to make things easier.

[code=html]<select name="select4" class="body" id="mySelect">[/code]

Now the two methods..

older:

<i>
 </i>var oSelect = document.getElementById("mySelect");
 var oOption = new Option();
 oOption.value = "some value";
 oOption.text = "some text";
 oSelect.options.add(oOption);

newer method:

<i>
 </i>var oSelect = document.getElementById("mySelect");
 var oOption = document.createElement("option");
 oOption.value = "some value";
 oOption.appendChild(document.createTextNode("some text"));
 oSelect.appendChild(oOption);

The newer method is using DOM methods which is probably the preferred method, although in essence there is very little difference between the two and the output is identical.

One thing to note, when doing the DOM method IE has a bug (does it? Imagine that!) where applying the .text property it doesn't add the text, other browsers take it fine and it's a totally valid property, so I create a text node and append it into the <option> instead.

Hope this helps.

older method[/QUOTE]

thnx for replying...but im a newbie to javascript so can u show me a working example if possible.

thnx..

@cybersipauthorApr 20.2007 — #can any 1 help me on this???

@JMRKERApr 20.2007 — #To 'ricp':

Thanks for the examples. I think I'm starting to understand the differences now.

I have one question. I created the following functions.

They both work as you coded them and I don't get any errors (that I see).

Since I'm still learning,

could you please verify that I have the correct order, syntax, etc.

so that I don't get unexpected errors in the future when I use them?

[code=php]
 function AddOption(SelectID,NewOptionText,NewOptionValue) {
 var oSelect = document.getElementById(SelectID);
 var oOption = document.createElement("option");
 oOption.value = NewOptionValue;
 oOption.appendChild(document.createTextNode(NewOptionText));
 oSelect.appendChild(oOption);
 }
 function InsertOption(SelectID,NewOptionText,NewOptionValue) {
 var oSelect = document.getElementById(SelectID);
 var oOption = document.createElement("option");
 oOption.value = NewOptionValue;
 oOption.appendChild(document.createTextNode(NewOptionText));
 oSelect.insertBefore(oOption,oSelect.getElementsByTagName("option")[0]);
 }
 [/code]

For 'cibersip':

This is what I did from what 'ricp' posted. Again, it 'seems' to work great!

[code=php]
 <html>
 <head>
 <title>Adding Select Options</title>
 <script type="text/javascript">
 function Toggle(idInfo) {
 var CState = document.getElementById(idInfo);
 if (CState.style.display == 'none') { CState.style.display = 'block'; }
 else { CState.style.display = 'none'; }
 }
 
 function AddOption(SelectID,NewOptionText,NewOptionValue) {
 var oSelect = document.getElementById(SelectID);
 var oOption = document.createElement("option");
 oOption.value = NewOptionValue;
 oOption.appendChild(document.createTextNode(NewOptionText));
 oSelect.appendChild(oOption);
 }
 function InsertOption(SelectID,NewOptionText,NewOptionValue) {
 alert(NewOptionText+':'+NewOptionValue);
 var oSelect = document.getElementById(SelectID);
 var oOption = document.createElement("option");
 oOption.value = NewOptionValue;
 oOption.appendChild(document.createTextNode(NewOptionText));
 oSelect.insertBefore(oOption,oSelect.getElementsByTagName("option")[0]);
 }
 </script>
 
 </head>
 <body>
 
 <button onClick="Toggle('InsertToOptions')">Insert</button>
 <select name="select4" class="body" id="mySelect" onChange="alert(this.selectedIndex)">
 <option value="1">--Select--</option>
 <option value="2">Read</option>
 <option value="3">Unread</option>
 </select>
 <button onClick="Toggle('AddToOptions')">Append</button>
 <p />
 
 <span id="InsertToOptions" style="display:none">
 <input type="text" id="InsNewOption" value="">
 <button onClick="InsertOption('mySelect',document.getElementById('InsNewOption').value,'Ins')">Insert</button>
 </span>
 
 <span id="AddToOptions" style="display:none">
 <input type="text" id="AddNewOption" value="">
 <button onClick="AddOption('mySelect',document.getElementById('AddNewOption').value,'Add')">Add</button>
 </span>
 
 </body>
 </html>
 [/code]

Also in #JavaScript _↴

Form submission problem - AJAX/Javascript involved.Random page generator validate a dropdownbox by jquery

Success!

Help @cybersip spread the word by sharing this article on Twitter...

Tweet This

Question on List/Menu drop down

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Question on List/Menu drop down

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴