how ho hide option from select?

[Jiri Zaloudek]

he guys... so far ive got this, no idea why it doesnt work:

<script type="text/javascript">
function showHideSelect(chb){

var isChecked = chb.checked;

var span = chb.parentNode;
var sel = span.getElementsByTagName("select");

for(var i=1; i<=form.mySelect.options.length; i++){
if(sel.options.className === "inactive"){
sel.options.style.display = (isChecked)?"none":"block";
}
}
}
</script>


<span>

<select name="selectName" id=test>
<option value=0>Choose</option>
<option value=1 class=active>a1</option>
<option value=2 class=inactive>i2</option>
<option value=3 class=active>a3</option>
<option value=4 class=inactive>i4</option>
<option value=5 class=active>a5</option>
<option value=6 class=inactive>i6</option>
<option value=7 class=active>a7</option>
</select>

<input type="checkbox" onclick="showHideSelect(this)"
name="checkboxName">

</span>

if u have any ideat ;( im hopeless from this

 

[RobG]

he guys... so far ive got this, no idea why it doesnt work:

<script type="text/javascript">
function showHideSelect(chb){

var isChecked = chb.checked;

var span = chb.parentNode;
var sel = span.getElementsByTagName("select");

getElementsByTagName returns a NodeList:

getElementsByTagName:
<URL: http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094 >

NodeList:
<URL: http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-536297177 >

In an HTML DOM, the NodeList is also an HTML Collection:

<URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506 >

You want a reference to a particular select element, so use:

var sel = span.getElementsByTagName("select")[0];

But since it has an ID, why not use getElementById and sve the hassle?

for(var i=1; i<=form.mySelect.options.length; i++){

Error: form is not defined. Perhaps you meant to use sel?

Also, the length property will be one more than the index of the last
option so when i = length, you will get an error.

Also, rather than getting the length of options every time, store it:

for (var i=1, iLen=sel.options.length; i<iLen i++) {

    if(sel.options.className === "inactive"){

If the value assigned to sel is not fixed as noted above, this will
error as a NodeList doesn't have an options property.

        sel.options.style.display = (isChecked)?"none":"block";

In general it's not a good idea to use "block" as an alternative to
display: none, use "" (empty string) so the element can return to its
default style.


An updated version is:

function showHideSelect(chb){

var isChecked = chb.checked;
var span = chb.parentNode;
var sel = span.getElementsByTagName("select")[0];

for(var i=1, iLen=sel.options.length; i<iLen; i++){

if(sel.options.className === "inactive") {
sel.options.style.display = (isChecked)?"none":"";
}
}
}

 

[GTalbot]

he guys... so far ive got this, no idea why it doesnt work:

<script type="text/javascript">
function showHideSelect(chb){

var isChecked = chb.checked;

var span = chb.parentNode;
var sel = span.getElementsByTagName("select");

for(var i=1; i<=form.mySelect.options.length; i++){
    if(sel.options.className === "inactive"){
        sel.options.style.display = (isChecked)?"none":"block";
    }}
}

</script>

<span>

<select name="selectName" id=test>
<option value=0>Choose</option>
<option value=1 class=active>a1</option>
<option value=2 class=inactive>i2</option>
<option value=3 class=active>a3</option>
<option value=4 class=inactive>i4</option>
<option value=5 class=active>a5</option>
<option value=6 class=inactive>i6</option>
<option value=7 class=active>a7</option>
</select>

<input type="checkbox" onclick="showHideSelect(this)"
name="checkboxName">

</span>

if u have any ideat ;( im hopeless from this

Jiri,

Please, can you elaborate on what exactly you want to do.

Because, from what I can see here, I think you want to disable an
option, disactivate it, not hide it.

The disabled attribute (scriptable) is supported in IE 8, Firefox 2+,
Opera 9+.

ReferenceObjOption.disabled = true;
will do what I believe you want to do. And if so, then you wouldn't
need a class for each select

And if you want to remove an option, then using the remove method is
best:

Interface HTMLSelectElement
remove
"
Remove an element from the collection of OPTION elements for this
SELECT. Does nothing if no element has the given index.
Parameters

index of type long
The index of the item to remove, starting from 0.
"

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-33404570


Also, as pointed out by RobG, you need to correctly create a reference
to the select (for scripting purposes). If the select has a name
attribute, then

document.forms["FormName"].elements["selectName"]

will create a scriptable reference to the select object. What you do

form.mySelect

is certainly likely wrong. You declared name="selectName", not
name="mySelect". Also, you have not identified how you reference the
form.

More on all this:

Javascript best practices
Reference Forms and Form Elements Correctly
http://www.javascripttoolbox.com/bestpractices/#forms

Using Web Standards in your web pages
Accessing Elements with the W3C DOM
https://developer.mozilla.org/en/Us...e_W3C_DOM#Accessing_Elements_with_the_W3C_DOM


Referencing Forms and Form Controls by comp.lang.javascript newsgroup
FAQ notes
http://jibbering.com/faq/faq_notes/form_access.html

regards, Gérard

 

[GTalbot]

You want a reference to a particular select element, so use:

  var sel = span.getElementsByTagName("select")[0];

Why create a nodelist and then have to iterate through it?

But since it has an ID, why not use getElementById and sve the hassle?

Why not use its *name* like this:

document.forms["FormName"].elements["selectName"]

Especially since a select must have a name to begin with if it is
going to be submitted...

Error: form is not defined. Perhaps you meant to use sel?

What is confused+confusing is that his function says showHideSelect
but what it does is iterate through all options with a classname of
inactive to remove these options. So, the function executions has no
direct and clear relation to the function name.

This is why the OP has to clearly state what he wants to do. I think
he wants to dynamically disable/re-enable some options, otherwise to
remove some which should be inactive. Proper support for HTML
attribute disabled for option is poor in older browser versions.

<option disabled> is not supported in IE 7 and Konqueror 4.x.
<option disabled> is supported in IE 8, Firefox 2+, Opera 9+, Safari
3.1+.

Another possible issue is that, in some browsers (Konqueror 3.5.x and
Safari 3.1), a disabled option is still successful when submitted..
which is wrong. This is maybe why Jiri wanted to go as far as remove
an "inactive" option.

More on this:

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/OptionDisabledSupport.html

Do not submit disabled option in combobox (resolved)
https://bugs.kde.org/show_bug.cgi?id=148981

SELECT with no name generates invalid query string (resolved)
https://bugs.webkit.org/show_bug.cgi?id=20184

regards, Gérard