473,898 Members | 1,976 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

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

<select title="Choose a number" onchange="obscu re()" 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

Apr 25 '06 #1
4 3671
deepee wrote:
I have a drop down box in HTML using SELECT and OPTION tags:

<select title="Choose a number" onchange="obscu re()" 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="obscu re()" with onchange="obscu re(this)"
and then:
function obscure(sel) {
sel.options[sel.selectedInd ex].text = "*"; }

Csaba Gabor from Vienna

Apr 25 '06 #2
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="javas cript">
function obscure(chosenN um){
for(i=0;i<docum ent.all('dropdo wn1').length;i+ +)
{
if(document.all ('dropdown1').o ptions[i].value== '*')
{
document.all('d ropdown1').remo ve(i);

}
}

select = document.getEle mentById('dropd own1');
opt = document.create Element('option ');
opt.text = "*";
opt.value = "*";
try {
select.add(opt, null);
} catch(ex) {
select.add(opt) ;
}

for(i=0;i<docum ent.all('dropdo wn1').length;i+ +)
{
if(document.all ('dropdown1').o ptions[i].value== '*')
{
document.all('d ropdown1').sele ctedIndex=i

}
}

}

</script>

Apr 25 '06 #3
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="javas cript">
The language attribute is deprecated, type is required:

<script type="text/javascript">

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

for(i=0;i<docum ent.all('dropdo wn1').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').o ptions[i].value== '*')
{
document.all('d ropdown1').remo ve(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="obscu re(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.getEle mentById('dropd own1');
opt = document.create Element('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<docum ent.all('dropdo wn1').length;i+ +)
{
if(document.all ('dropdown1').o ptions[i].value== '*')
{
document.all('d ropdown1').sele ctedIndex=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.c om/FAQ>
Apr 25 '06 #4
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.selectedInd ex].text = "*"; }
</script>

<table>
<tr>
<td>
<SELECT TITLE="Choose a number" onchange="obscu re(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.selectedInd ex=len;
//alert("chosenNu m = " + chosenNum);
}
</script>

<table>
<tr>
<td>
<SELECT TITLE="Choose a number" onMouseDown="re moveStar(this)"
onchange="obscu re(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>

Apr 26 '06 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

10
3226
by: David | last post by:
Hi everyone, Hoping there are some .js/browser experts out there that can help with this weird problem. I have made a swap div routine and applied the events to menu buttons with a closer layer behind the menus. The closer div has a lower index than the submenu divs so it appears behind them. The closer div contains a transparent gif with an event applied to it to close all of the divs when moused over.
19
6939
by: dmiller23462 | last post by:
Hi guys....I have absolutely NO IDEA what I'm doing with Javascript but my end result is I need two text boxes to stay hidden until a particular option is selected....I've cobbled together the JavaScript in this code from a couple different sites but I'm not 100% sure what each line is doing...This is the ASP code that I'm using for the page....Take a look at the JavaScript code and please let me know what each line is doing....I have been...
2
4316
by: Thanh Nu | last post by:
Hi, I would like to hide a column in a web datagrid (with create columns automatically at runtime checked), and I cannot refer to the columns collection like this: DataGrid1.Columns(0).Visible = False (the message at runtime is something like index out of range, and under the debuger, I discover that the attribute count of the columns collection is 0!) Below is my piece of code.
2
3103
by: J.B. | last post by:
Greetings all - I have been working on this issue for a while now and it has been frustrating to the point where I'm reaching out to the gurus of .NET for any suggestions. I have a webform where when a user selects an item from a dropdown box and attempts to run a report, if a date is not found in my database, it should return a message to the browser notifying a user that they must select another item to run the report against. The...
3
2918
by: Dean Slindee | last post by:
In a checked listbox, I am allowing drag/drop of the items within (resequencing). Problem is, when dropping a checked item, the checked state always reverts to unchecked (unwanted). Anyone know how to set the checked state of a checked listbox item in code. Here is the drag/drop code, which works fine, except for unchecking the dropped item: Private Sub clbQueryItems_DragDrop(ByVal sender As System.Object, ByVal e As...
2
1641
by: Gellert, Andre | last post by:
Hello, I have following problem: A user "xy" shouldn't have any rights to a table, but needs data from the content of the table. My idea was to setup a PL/PGSQL procedure to fetch the data from the table, so that the user only is allowed to access the procedure. I also tried using a SQL function, but this doesn't work, too. Working with views may be a solution - or are e.g. cursors
5
2182
by: GTi | last post by:
Whats wring with this code? <select class=EditField size="1" name="PlantUnitID" title="Select line"> <option value="0" >Standalone Unit</option> <option value="1" selected >Connected Unit 1</option> <option value="1" selected >Connected Unit 2</option> </select> <span onclick="NewWindow('pluginpage.html?EditUnitGUID='+this.form.PlantUnitID.options.value+'&DoPostBack=1','namexx',200,310);"
1
4634
by: TKapler | last post by:
I think i am quite experienced javascript programmer, but I got a problem. I have a selectbox with e.g. 17 optgroups with 100 options. I need a javascript code to hide some of that optgroups (i can give each optgroup individual ID, e.g. id="group1"..."group"17). e.g. the html code looks like: <select name="mySelect" id="mySelect"> <optgroup label="First group" id="group1" > <option value="a" > Item A
22
12512
by: MP | last post by:
vb6,ado,mdb,win2k i pass the sql string to the .Execute method on the open connection to Table_Name(const) db table fwiw (the connection opened via class wrapper:) msConnString = "Data Source=" & msDbFilename moConn.Properties("Persist Security Info") = False moConn.ConnectionString = msConnString moConn.CursorLocation = adUseClient moConn.Mode = adModeReadWrite' or using default...same result
1
2376
by: prathna | last post by:
Hi .. I have a logic:iterate tag which will display 5 rows each row with a drop downlist and 2 textfields.now by default all the rows will be shown.how do i hide all the rows except the first one.i know how to show/hide a row when its not dynamic.but i dont know how to do it when its logic iterate tag. <logic:iterate indexId="index" id="phoneItem" name="nameForm" property="results"> <% String dropdownType = "results.dropdownType";...
0
9839
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
11256
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10857
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10481
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
8034
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7187
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
6076
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4705
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4295
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.