On Oct 18, 7:41 am, punn...@gmail.com 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
|
Similar Threads
