Solved

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

Posted on 2004-10-24
872 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
Question by:b_rajathilagam
    3 Comments
     
    LVL 7

    Expert Comment

    by:BenMorel
    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:
    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
    Why the grading B???
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone. Privacy Policy Terms of Use

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Suggested Solutions

    No!  Not that kind of date. :-)  That wasn't meant to be a pick up line. This article is about displaying dates in different formats regardless of the browser being used.  If you let the browser's JavaScript engine format a date object for you, t…
    When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
    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…

    877 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

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now