Hide select item in a drop-down box with an Asterisk

[deepee]

I have a drop down box in HTML using SELECT and OPTION tags:

<select title="Choose a number" onchange="obscure()" name="Digit1"
ID="Digit1">
<OPTION VALUE="">&nbsp;</OPTION>
<OPTION VALUE="0">&nbsp;0</OPTION>
<OPTION VALUE="1">&nbsp;1</OPTION>
<OPTION VALUE="2">&nbsp;2</OPTION>
<OPTION VALUE="3">&nbsp;3</OPTION>
</select>

Using the 'onchange' event I can fire a javascript function obscure().
How can I hide the selected number with an Asterisk (like a password)?
I've tried several different Googles but I can't find a method that
works.

Anyone have any ideas?

Thanks in advance

[Csaba Gabor]

deepee wrote:

I have a drop down box in HTML using SELECT and OPTION tags:

<select title="Choose a number" onchange="obscure()" name="Digit1"
ID="Digit1">
<OPTION VALUE="">&nbsp;</OPTION>
<OPTION VALUE="0">&nbsp;0</OPTION>
<OPTION VALUE="1">&nbsp;1</OPTION>
<OPTION VALUE="2">&nbsp;2</OPTION>
<OPTION VALUE="3">&nbsp;3</OPTION>
</select>

Using the 'onchange' event I can fire a javascript function obscure().
How can I hide the selected number with an Asterisk (like a password)?
I've tried several different Googles but I can't find a method that
works.

Looks awfully dicey on the example you gave - hopefully you have a good
reason.
Here's one approach:
Replace onchange="obscure()" with onchange="obscure(this)"
and then:
function obscure(sel) {
sel.options[sel.selectedIndex].text = "*"; }

Csaba Gabor from Vienna

[deepee]

Thanks for the reply.

Not sure why you think it's dicey to do what I'm doing. I just want to
obscure the selected number. Much in the same way that a Password field
does.

Sorry to say your code didn't work, though i'm not sure why.

I've come up with this but isn't exactly tidy and leaves an asterisk in
the list.

<script language="javascript">
function obscure(chosenNum){
for(i=0;i<document.all('dropdown1').length;i++)
{
if(document.all('dropdown1').options[i].value== '*')
{
document.all('dropdown1').remove(i);

}
}

select = document.getElementById('dropdown1');
opt = document.createElement('option');
opt.text = "*";
opt.value = "*";
try {
select.add(opt, null);
} catch(ex) {
select.add(opt);
}

for(i=0;i<document.all('dropdown1').length;i++)
{
if(document.all('dropdown1').options[i].value== '*')
{
document.all('dropdown1').selectedIndex=i

}
}

}

</script>

[RobG]

deepee said on 25/04/2006 9:52 PM AEST:

Thanks for the reply.

Not sure why you think it's dicey to do what I'm doing. I just want to
Probably because once a user selects an option they can no longer see
the value they selected.

obscure the selected number. Much in the same way that a Password field
does.
Csaba's code does exactly that.

Sorry to say your code didn't work, though i'm not sure why.
'Didn't work' how? What error message? What did your modified code look
like?

I've come up with this but isn't exactly tidy and leaves an asterisk in
the list.
It is IE-specific and uses some bad coding practices. It also does
something completely different to that specified in your first post.
You asked for a function that replaced the text of the selected option
with an asterisk '*'.

The function you have posted will replace the text of any option with a
value of '*' with '*' in some browsers. It does so very inefficiently
and almost without regard for standards.

<script language="javascript">
The language attribute is deprecated, type is required:

<script type="text/javascript">

function obscure(chosenNum){
Where does 'chosenNum' come from? What is its value? Why is it never used?

for(i=0;i<document.all('dropdown1').length;i++)
'i' will be global, it is usually important to keep counters local so
use 'var'.

The use of 'document.all' will stop this from working in a large number
of browsers, it very likely won't work in Gecko-based browsers. Csaba
suggested having the onchange handler pass a reference to the select to
the function, then you don't need to find the select later (making your
code is more portable and efficient).

The way you've written it, on every loop the statement must find
'dropdown1' and get its length property. It is much more efficient to
get that only once.

{
if(document.all('dropdown1').options[i].value== '*')
{
document.all('dropdown1').remove(i);
If you want to remove the options with a value of '*', then do the
following:
Pass a reference to the select from the change event:

<select onchange="obscure(this);" ...>
Change the function to:

function obscure(sel)
{
var opt, opts = sel.options;
var i = opts.length;
while (i--){
opt = opts[i];
if ('*' == opt.value){
sel.remove(i);
}
}
}

The 'while' loop counts backwards through the options, which can be handy.

}
}

select = document.getElementById('dropdown1');
opt = document.createElement('option');
opt.text = "*";
opt.value = "*";
That is silly - you remove the option, then replace it with one that has
different text? Why not just replace the text of the existing option?
The above while loop becomes:

while (i--){
opt = opts[i];
if ('*' == opt.value){
opt.text = '*';
}
}

Incidentally, it is much more reliable to add options using new
Option(), search the archives for examples.

try {
select.add(opt, null);
} catch(ex) {
select.add(opt);
}
If ever you are tempted to use try..catch, you are probably doing
something wrong. There is rarely any need for it (though it is handy in
a few limited cases).

for(i=0;i<document.all('dropdown1').length;i++)
{
if(document.all('dropdown1').options[i].value== '*')
{
document.all('dropdown1').selectedIndex=i

This will successively select all the options with a value of '*',
probably leaving the last one as selected, which may not be the one that
the user actually selected. Dicey indeed.
The logic of what you are trying to do doesn't make sense, I hope it
does to you (and your users).

--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>

[deepee]

Rob, thanks for your time and the comprehensive reply.

Some of my intention obviously wasn't clear so I'll try and clarify.

- I want a drop-down box that users can select from but the selection
they make must then be obscured so that it can't be seen by others once
selected. I know the user cannot see what they have selected after
they've made the selection, that's the intention. I want the drop-down
to work in the same way as a password field. You can't see what you
have typed in these, I want the drop-down equivalent.

- Csabas code didn't work because it replaced the selected number with
an asterisk rather than obscuring it.

........
function obscure(sel) {
sel.options[sel.selectedIndex].text = "*"; }
</script>

<table>
<tr>
<td>
<SELECT TITLE="Choose a number" onchange="obscure(this)"
NAME="dropdown1" ID="dropdown1">
.........

- the code i posted was a stab at a solution, cobbled together from
various parts found on the net, to give an idea of my intentions, it
seems to have muddied the waters - apologies

I've taken your suggestions and hopefully come up with a reasonable
piece of code. Happy for any other pointers though. In an ideal world
I'd just like to display an asterisk without having to add/remove it
each time but I've yet to find a way of doing this.

Thanks
Dean

<html>
<body>

<script type="text/javascript">
function removeStar(sel){
var opt, opts = sel.options;
var i = opts.length;
while (i--){
opt = opts[i];
if ('*' == opt.value){
sel.remove(i);
}
}
}

function obscure(sel)
{
var chosenNum = sel.value;
var len = sel.length;
sel.options[len] = new Option("*","*");
sel.selectedIndex=len;
//alert("chosenNum = " + chosenNum);
}
</script>

<table>
<tr>
<td>
<SELECT TITLE="Choose a number" onMouseDown="removeStar(this)"
onchange="obscure(this)" NAME="dropdown1" ID="dropdown1">
<OPTION VALUE="">&nbsp;</OPTION>
<OPTION VALUE="0">&nbsp;0</OPTION>
<OPTION VALUE="1">&nbsp;1</OPTION>
<OPTION VALUE="2">&nbsp;2</OPTION>
<OPTION VALUE="3">&nbsp;3</OPTION>
<OPTION VALUE="4">&nbsp;4</OPTION>
<OPTION VALUE="5">&nbsp;5</OPTION>
<OPTION VALUE="6">&nbsp;6</OPTION>
<OPTION VALUE="7">&nbsp;7</OPTION>
<OPTION VALUE="8">&nbsp;8</OPTION>
<OPTION VALUE="9">&nbsp;9</OPTION>
</SELECT>

</TD>
</tr>
</table>

</body>
</html>