Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > select list show/hide elements: problems in IE

Reply
Thread Tools

select list show/hide elements: problems in IE

 
 
punnu35@gmail.com
Guest
Posts: n/a
 
      10-17-2007
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>

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      10-18-2007
On Oct 18, 7:41 am, (E-Mail Removed) 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

 
Reply With Quote
 
 
 
 
punnu35@gmail.com
Guest
Posts: n/a
 
      10-19-2007
Thanks Rob.. This help..
Puneet

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Select List transfer to another List with array richardsith Javascript 0 04-20-2012 09:10 PM
master select list changes contents of slave select lists Dan Thomas Ruby 0 02-02-2011 06:59 PM
to select random number from select list Pranjal Jain Ruby 3 04-10-2008 04:01 PM
Select List transfer to another List carrajo Javascript 5 02-17-2006 02:23 AM
select of select box will select multiple in another box palmiere Javascript 1 02-09-2004 01:11 PM



Advertisments