select list show/hide elements: problems in IE

punnu35 · Oct 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>

RobG · Oct 18, 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"

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>

punnu35 · Oct 19, 2007

Thanks Rob.. This help..
Puneet

select list show/hide elements: problems in IE Options	1	Oct 17, 2007
Multi select options in a menu	1	Oct 30, 2022
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
How do I hide the modal after 5 seconds?	4	Jun 1, 2023
I dont get this. Please help me!!	2	Jan 24, 2023
action_page.php form	2	Oct 25, 2020
Javascrip code wont run properly.	2	Oct 2, 2022
Survey details won't go through using php, ajax, Mysql	0	Oct 26, 2023

select list show/hide elements: problems in IE

punnu35

RobG

punnu35

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads