Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Aug 2002
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to make drop down editable?

    is it possible for a drop down menu to be function as input box and drop down.

    the drop down i meant is the <select> tag.

    Is it possible?

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Montreal, Canada
    Posts
    644
    Thanks
    0
    Thanked 0 Times in 0 Posts
    no, you can however have a textbox that inputs data into the dropdown.

  • #3
    New Coder
    Join Date
    Jun 2002
    Posts
    78
    Thanks
    0
    Thanked 0 Times in 0 Posts
    u could create like a custom box, with the selected layer on top showing and the other layer with a bunch of text inputs in it hidden until the user hits the down arrow button. I'd create it for u, but right now im running out of time.
    Computers are simple for the complex mind, yet complex for the simple mind

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Montreal, Canada
    Posts
    644
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <html>
    
    <head>
    <script>
    function sh(what) {
    d = "document.getElementById('"+what+"').style.display";
    dsp = eval(d);
    if (dsp=="none") {
    eval(d+" = ''");
    }else{
    eval(d+" = 'none'");
    }
    }
    </script>
    </head>
    
    <body>
    
    <form>
    
    <table border="1" style="border: 1 solid #000000;" cellspacing="0" cellpadding="0" width="143px">
      <tr>
        <td width="100%"><input type="text" name="bx0" size="18" style="border: 0 solid #000000;"><font SIZE="1" face="Webdings"><a href="javascript: sh('drp');">6</a></font></td>
      </tr>
    </table>
    <table border="1" style="border: 1 solid #000000; display: ;" cellspacing="0" cellpadding="0" width="143px" id="drp">
      <tr>
        <td width="100%"><input type="text" name="bx1" size="20" style="border: 0 solid #000000;"></td>
      </tr>
      <tr>
        <td width="100%"><input type="text" name="bx2" size="20" style="border: 0 solid #000000;"></td>
      </tr>
      <tr>
        <td width="100%"><input type="text" name="bx3" size="20" style="border: 0 solid #000000;"></td>
      </tr>
    </table>
    
    </form>
    
    </body>
    
    </html>

  • #5
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    XUL provides a widget for accomplishing this:

    <menulist editable="true" label="default value" id="color">
    <menupopup>
    <!-- many <menuitem/>'s -->
    </menupopup>
    </menulist>

    Though I somehow don't think you are writing a XUL document.

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Location
    Iran
    Posts
    695
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, acutually I don't know the answer! I just wanted to know what this XUL is! Where can I find some info about this thing & it's widgets?!

  • #7
    New Coder
    Join Date
    Aug 2002
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the script x_goose_x but how do i select the option?

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    Montreal, Canada
    Posts
    644
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's what I don't get about the whole thing. How do you want it?

    I thought maybe radio buttons beside it?

    Code:
    +------------+
    |   Start    |
    +------------+
    | one      o |
    | two      o |
    | three    o |
    +------------+
    or make them by default non-editable but with an edit button beside it:

    Code:
    +------------+
    |   Start    |
    +------------+
    | one      E |
    | two      E |
    | three    E |
    +------------+
    E being the edit button.

    Tell me what you want and I'll write the script.

  • #9
    New Coder
    Join Date
    Aug 2002
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually what i wanted is a drop down menu where user will be able to select the options like the <select> tag. But the options are fixed. I want the drop down to function like an input textbox so that if the options are not available user can key in an option.

    This is the normal drop down.
    <select name="something">
    <option value="1">one</option>
    :
    </select>

    Is it possible?

    the script that u give me is something like what i wanted but i cannot select the option?

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Location
    Montreal, Canada
    Posts
    644
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <html>
    
    <head>
    <script>
    function sh(what) {
    d = "document.getElementById('"+what+"').style.display";
    dsp = eval(d);
    if (dsp=="none") {
    eval(d+" = ''");
    }else{
    eval(d+" = 'none'");
    }
    document.dropform.bx0.value = eval("document.dropform."+obj+".value");
    }
    function clk(n) {
    y = document.dropform.length-1;
    for (x=0;x<y;x++) {
    eval("document.dropform.bx"+(x+1)+".style.backgroundColor = ''");
    eval("document.dropform.bx"+(x+1)+".style.color = ''");
    }
    eval("document.dropform."+n+".style.backgroundColor = 'highlight'");
    eval("document.dropform."+n+".style.color = 'white'");
    document.dropform.bx0.value = eval("document.dropform."+n+".value");
    obj = n;
    }
    </script>
    </head>
    
    <body>
    
    <form name="dropform">
    
    <table border="1" style="border: 1 solid #000000;" cellspacing="0" cellpadding="0" width="143px">
      <tr>
        <td width="100%"><input type="text" name="bx0" size="18" style="border: 0 solid #000000;"><font SIZE="1" face="Webdings"><a href="javascript: sh('drp');">6</a></font></td>
      </tr>
    </table>
    <table border="1" style="border: 1 solid #000000; display: none;" cellspacing="0" cellpadding="0" width="143px" id="drp">
      <tr>
        <td width="100%"><input type="text" name="bx1" size="20" style="border: 0 solid #000000;" onclick="clk(this.name)"></td>
      </tr>
      <tr>
        <td width="100%"><input type="text" name="bx2" size="20" style="border: 0 solid #000000;" onclick="clk(this.name)"></td>
      </tr>
      <tr>
        <td width="100%"><input type="text" name="bx3" size="20" style="border: 0 solid #000000;" onclick="clk(this.name)"></td>
      </tr>
    </table>
    
    </form>
    
    </body>
    
    </html>
    variable obj is the name of the element that is selected.

    Therefore:

    p = eval("document.dropform."+obj+".value")

    p is the value of the element.

    What is the purpose of all this? How is the informatrion going to be used?
    Last edited by x_goose_x; 08-02-2002 at 06:34 PM.

  • #11
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by ConfusedOfLife
    Well, acutually I don't know the answer! I just wanted to know what this XUL is! Where can I find some info about this thing & it's widgets?!
    XUL is Gecko-only, and the Netscape 6/7, and Mozilla UI's are written in it. (Not sure if Beonex, K-meleon, or Galeon uses XUL or embeds Gecko in a native window...)

  • #12
    Regular Coder
    Join Date
    Jul 2002
    Location
    USA
    Posts
    151
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's an example of a javascript combo box I whipped up about a year ago:

    http://www.undefined.net/null/combo.html

    It's incomplete, but should provide you with a good base to start from.

  • #13
    New Coder
    Join Date
    Aug 2002
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks alot guys...

    actually i'm integrating this script with cold fusion script i need to get the value of the selected option.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •