Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

how can clear all options and optgroup of select and setting new optgroup and options?

Posted on 2004-10-24
3
Medium Priority
?
881 Views
Last Modified: 2009-06-17

HI
 
         THe form having an select field. I wants to clear all optgroup and existing options and set new optgroup and options to the existing select field. Can i do this changes through javascript?

Thanks.
0
Comment
Question by:b_rajathilagam
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 7

Expert Comment

by:BenMorel
ID: 12394903
Hi !

You can do this with var "options" from your select object, and "new Option()" to set a new one.

Here is a very easy example :

==========================================================

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test page</title>
<script language="javascript">
<!--
var NewMenu = new Array("New item 1", "New item 2", "And so on ..!");

function Change() {
 var s=document.f.MySelect;
 var i;
 // erase
 for (i=s.options.length-1; i>=0; i--) {
  s.options[i] = null;
 }
 for (i=0; i<NewMenu.length; i++) {
  s.options[i] = new Option(NewMenu[i]);
 }
}
//-->
</script>
</head>

<body>
<form name="f">
<select name="MySelect">
<option>Item 1</option>
<option>Item 2</option>
<option>...</option>
</select>
<input type="button" name="Submit" value="Change them !" onClick="Change()">
</form>
</body>
</html>

==========================================================

See ya ;)
Ben
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 750 total points
ID: 12396441
Here my method:

<html>
<head>
<script>
function chngSel(theBtn){
  theSel = theBtn.form.mySel;
  newSel = document.createElement("select");
  opt = newSel.options;
  newSel.id = "mySel";
  newGrp = document.createElement("optgroup");
  newGrp.setAttribute("label", "new Label 1");
  newGrp.appendChild(new Option());
  newGrp.appendChild(new Option());
  newSel.appendChild(newGrp);
  newGrp = document.createElement("optgroup");
  newGrp.setAttribute("label", "new Label 2");
  newGrp.appendChild(new Option());
  newGrp.appendChild(new Option());
  newGrp.appendChild(new Option());
  newSel.appendChild(newGrp);
  theSel.parentNode.replaceChild(newSel, theSel);
  opt[0].text = "new Opt 1";
  opt[1].text = "new Opt 2";
  opt[2].text = "new Opt A";
  opt[3].text = "new Opt B";
  opt[4].text = "new Opt C";

}
</script>
</head>
<body>
<form>
<select name="mySel">
<optgroup label="Group 1">
<option>Item 1</option>
<option>Item 2</option>
<option disabled="true">Item 3</option>
<option>Item 4</option>
</optgroup>
<optgroup label="Group 2">
<option>Item A</option>
<option>Item B</option>
<option disabled="true">Item C</option>
<option>Item D</option>
</optgroup>
</select>
<input type=button value="Change" onClick="chngSel(this)">
</form>
</body>
</html>

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 12397883
Why the grading B???
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question