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

Discussion in 'Javascript' started by deepee, Apr 25, 2006.

  1. deepee

    deepee Guest

    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
     
    deepee, Apr 25, 2006
    #1
    1. Advertising

  2. deepee

    Csaba Gabor Guest

    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
     
    Csaba Gabor, Apr 25, 2006
    #2
    1. Advertising

  3. deepee

    deepee Guest

    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.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.value== '*')
    {
    document.all('dropdown1').selectedIndex=i

    }
    }

    }



    </script>
     
    deepee, Apr 25, 2006
    #3
  4. deepee

    RobG Guest

    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.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;
    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;
    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.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>
     
    RobG, Apr 25, 2006
    #4
  5. deepee

    deepee Guest

    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;
    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>
     
    deepee, Apr 26, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SirPoonga
    Replies:
    2
    Views:
    804
    Ben Strackany
    Jan 7, 2005
  2. Mel
    Replies:
    1
    Views:
    1,480
    MLightsOut
    Feb 24, 2009
  3. Sy Ys
    Replies:
    0
    Views:
    136
    Sy Ys
    Sep 15, 2007
  4. palmiere
    Replies:
    1
    Views:
    450
    Erwin Moller
    Feb 9, 2004
  5. Replies:
    3
    Views:
    314
Loading...

Share This Page