select list show/hide elements: problems in IE

Discussion in 'Javascript' started by punnu35@gmail.com, Oct 17, 2007.

  1. Guest

    I am trying to do this simple thing in html. I have a select list and
    when you click the button the first element should hide. It works fine
    in firefox but not in IE. I have tried all sorts of things but could
    not do it. Any help...


    <html>
    <body>
    <select id="pid" name="pid" multiple>
    <option id="a" value="a">a</option>
    <option id="b" value="b">b</option>
    <option id="c" value="c">c</option>
    </select>
    <input name="submit" value="Start Analysis" type="button"
    onClick="javascript:show_hide()">
    </body>
    <script type="text/javascript">
    function show_hide() {
    var a = document.getElementById("a");
    a.style.display="none";
    }
    </script>
    </html>
     
    , Oct 17, 2007
    #1
    1. Advertising

  2. RobG Guest

    On Oct 18, 7:41 am, wrote:
    > I am trying to do this simple thing in html. I have a select list and
    > when you click the button the first element should hide. It works fine
    > in firefox but not in IE. I have tried all sorts of things but could
    > not do it. Any help...
    >
    > <html>
    > <body>
    > <select id="pid" name="pid" multiple>
    > <option id="a" value="a">a</option>
    > <option id="b" value="b">b</option>
    > <option id="c" value="c">c</option>
    > </select>
    > <input name="submit" value="Start Analysis" type="button"


    It is not a good idea to name an element "submit", if used in form, it
    will mask the form's sumbit method so you can't programmatically call
    it.


    > onClick="javascript:show_hide()">


    There is no need for the javascript label:

    onclick="show_hide()">


    > </body>
    > <script type="text/javascript">


    For valid HTML, script elements must be either in the head or body,
    they can't be children of the html element.


    > function show_hide() {
    > var a = document.getElementById("a");
    > a.style.display="none";


    You have to remove the option:

    a && a.parentNode.removeChild(a);


    If you want to keep the removed option availble, you can store it
    elsewhere and put it back when you need it, e.g.:

    <select id="temp" style="display: none;">
    </select>


    <select id="pid" name="pid" multiple>
    <option id="a" value="a">a</option>
    <option id="b" value="b">b</option>
    <option id="c" value="c">c</option>
    </select>
    <input value="Start Analysis" type="button"
    onclick="hideOpt('a');">
    <input value="End Analysis" type="button"
    onclick="showOpt('a');">

    <script type="text/javascript">
    function hideOpt(id){
    var opt = document.getElementById(id);
    var sel = document.getElementById('temp');
    opt && sel && sel.appendChild(opt);
    }
    function showOpt(id){
    var opt = document.getElementById(id);
    var sel = document.getElementById('pid');
    if (opt) {
    if (sel) {
    sel.insertBefore(opt, sel.firstChild);
    (sel.selectedIndex = -1);
    }
    }
    }
    </script>


    --
    Rob
     
    RobG, Oct 18, 2007
    #2
    1. Advertising

  3. Guest

    Thanks Rob.. This help..
    Puneet
     
    , Oct 19, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Guest
    Replies:
    3
    Views:
    13,551
    Walter Wang [MSFT]
    Jul 27, 2006
  2. Replies:
    1
    Views:
    1,754
    Neredbojias
    Oct 17, 2007
  3. Hide / Show form Elements.

    , Sep 8, 2005, in forum: Javascript
    Replies:
    4
    Views:
    179
  4. Frances
    Replies:
    3
    Views:
    128
    Randy Webb
    Sep 9, 2005
  5. ll
    Replies:
    2
    Views:
    686
    Thomas 'PointedEars' Lahn
    May 1, 2008
Loading...

Share This Page