Hide drop-down option

[son]

Having a select dropdown, it there a way to hide one of the options (<option value='1' >First Option</option>)? I cannot take it out as it comes from the backend and first option is used on different form. How can I access the dropdown's second option (first on is an empty one) and hide it?Son

[justsomeguy]

I'm not sure if this works with options, but you might be able to change the display property on it.var dd = document.getElementById("dropdown");dd.options[1].style.display = "none";

[son]

I'm not sure if this works with options, but you might be able to change the display property on it.var dd = document.getElementById("dropdown");dd.options[1].style.display = "none";

Shame, does not work. Do you think this cannot be achieved?Son

[justsomeguy]

If this doesn't work, then it can't happen:<select name="test"><option>option 1</option><option style="display: none;">option 2</option><option>option 3</option></select>

[son]

If this doesn't work, then it can't happen:<select name="test"><option>option 1</option><option style="display: none;">option 2</option><option>option 3</option></select>

This works fine, but Javascript one does not...SonEdit: I realise now what problem might be. The drop down is in iframe. I tried to put code in head section of iframed document, but still does not work...

[justsomeguy]

Does the dropdown have an ID that matches the ID that Javascript is using to get the element?

[son]

Does the dropdown have an ID that matches the ID that Javascript is using to get the element?

The generated html is:

<select   name='category' id='category' class='input' flags='268566528' valuewhenrendered='' onKeyPress='return SelectKeyPressHandler (event);' onchange="setWindowChanged(window, true);" iFlags='268566528'><option value='' SELECTED></option><option value='9' >Consumer</option><option value='3' >Interior design</option><option value='1' >Retail</option></select>

and I have now in main document (removed the javascript from iframed document)

<script type="text/javascript">var iframe = document.getElementById("frame");var dd = iframe.getElementById("category");dd.options[1].style.display = "none"; </script>

'frame' is id of iframe...Son

[justsomeguy]

First, there's a link in my signature for Firebug, if you don't already have that installed go ahead and get Firefox set up and then install Firebug for it. It will help for things like this.I'm not sure if you're accessing the element the right way, but you can use Firebug to help. You can use console.log to print anything you want, even an object, for debugging. When you install Firebug you get a little green checkbox (or red X) that shows up on the bottom of the browser (after installing you need to go to Tools->Firebug and enable it). If you click that icon on the bottom then it expands into the console. From the 6 tabs on the top, the Console tab shows the debug information. Log the different objects and check in the console to see if anything is undefined.<script type="text/javascript">var iframe = document.getElementById("frame");console.log(iframe);var dd = iframe.getElementById("category");console.log(dd);dd.options[1].style.display = "none"; </script>If they are defined then you'll see a line that shows what they are, and you can click that to explore the object and see what other properties and methods there are on it. If there are errors then the green checkmark changes to the red X and the error messages will show up in the console, you can click them for more information.

[son]

First, there's a link in my signature for Firebug, if you don't already have that installed go ahead and get Firefox set up and then install Firebug for it. It will help for things like this.I'm not sure if you're accessing the element the right way, but you can use Firebug to help. You can use console.log to print anything you want, even an object, for debugging. When you install Firebug you get a little green checkbox (or red X) that shows up on the bottom of the browser (after installing you need to go to Tools->Firebug and enable it). If you click that icon on the bottom then it expands into the console. From the 6 tabs on the top, the Console tab shows the debug information. Log the different objects and check in the console to see if anything is undefined.<script type="text/javascript">var iframe = document.getElementById("frame");console.log(iframe);var dd = iframe.getElementById("category");console.log(dd);dd.options[1].style.display = "none"; </script>If they are defined then you'll see a line that shows what they are, and you can click that to explore the object and see what other properties and methods there are on it. If there are errors then the green checkmark changes to the red X and the error messages will show up in the console, you can click them for more information.

Did what you said and it is showing in red:iframe is nulltrade.php()()trade.php (line 10)[break on this error] var dd = iframe.getElementById("category");Checked iframe, but shows correctly id="frame"...(?)and taking only

var dd = document.getElementById("category");console.log(dd);dd.options[1].style.display = "none"; 

it says that dd is null...Son

[justsomeguy]

Hmm. I wonder if "frame" isn't a good ID to use. I always assumed that there weren't any reserved words for IDs or anything. Try renaming the ID, but I'm assuming it's going to do the same thing.Are the script and the iframe on the same page? The iframe is on trade.php also right? Also make sure that script chunk shows up after the iframe does, if the script is before the iframe it won't be able to find the element because it hasn't been created yet (inline scripts run as soon as the browser finds them, it doesn't wait to load the rest of the page before running them).

[son]

Hmm. I wonder if "frame" isn't a good ID to use. I always assumed that there weren't any reserved words for IDs or anything. Try renaming the ID, but I'm assuming it's going to do the same thing.Are the script and the iframe on the same page? The iframe is on trade.php also right? Also make sure that script chunk shows up after the iframe does, if the script is before the iframe it won't be able to find the element because it hasn't been created yet (inline scripts run as soon as the browser finds them, it doesn't wait to load the rest of the page before running them).

No change. THe iframe is on trade.php with name 'mc'. I use this code in head of trade.php:

var mc = document.getElementById("mc");console.log(mc);var dd = mc.getElementById("category");console.log(dd);dd.options[1].style.display = "none"; 

It says 'mc is null'. Or to be more acurate it complains about 'var dd = mc.getElementById("category");'Son

[son]

No change. THe iframe is on trade.php with name 'mc'. I use this code in head of trade.php:

var mc = document.getElementById("mc");console.log(mc);var dd = mc.getElementById("category");console.log(dd);dd.options[1].style.display = "none"; 

It says 'mc is null'. Or to be more acurate it complains about 'var dd = mc.getElementById("category");'Son

Using

var mc = window.frames("mc");console.log(mc);var dd = mc.getElementById("category");console.log(dd);dd.options[1].style.display = "none"; 

get rid of the error message (all looks perfectly fine), but option still shows (?)...SonBut saying that is says in DOM '"mcundefined"'

[justsomeguy]

If that code is just in the head of the document it's not going to work, the code is going to run before the browser creates the iframe. You need to either put the code in a function and run the function when the page loads, or put the code at the end of the body so that it runs after the iframe gets created. Since it depends on the content in the iframe having loaded, you probably want the function to run after the iframe loads.

function do_it(){  var mc = window.frames("mc");  console.log(mc);  var dd = mc.getElementById("category");  console.log(dd);  dd.options[1].style.display = "none"; }

<iframe onload="do_it();">

[son]

If that code is just in the head of the document it's not going to work, the code is going to run before the browser creates the iframe. You need to either put the code in a function and run the function when the page loads, or put the code at the end of the body so that it runs after the iframe gets created. Since it depends on the content in the iframe having loaded, you probably want the function to run after the iframe loads.

Permission denied to get property XULElement.accessKey[break on this error] undefinedXPCSafeJ...apper.cpp (line 445)uncaught exception: [Exception... "Cannot convert WrappedNative to function" nsresult: "0x8057000d (NS_ERROR_XPC_CANT_CONVERT_WN_TO_FUN)" location: "JS frame :: domain/file :: do_it :: line 10" data: no]

There is a lot of other JavaScript on page, guess this is where problem is coming from. Could you have a look on file for me? Would send location via private message. Also, I tested it with two other files, one only with iframe, other one with only the select fields (all javascript in main file). There it also does not work (it does not hide), although console does not bring an error. In DOM it only shows that frame is NULL. I would have thouht that this at least works (?)Son

[justsomeguy]

If you want to send me links to test pages I'll take a look.

[son]

If you want to send me links to test pages I'll take a look.

Thanks. I send you a message with link...Son