how to add a new select list on the same page by clicking a button or something else

Discussion in 'JavaScript' started by 12345671, Oct 30, 2007.

0
  1. #1
    My environment is Php program and mysql database:
    On the webpage, after users choose a database and a table of the database,
    a web page for searching is presendted for user to choose what data they want to see.
    On the search page, users can input "id<100" by html selection list and text input

    What I want is:

    Put a little icon or button or whatever next, so when users click this icon, then another new selection list and text input
    is shown on the same page. so users can do the search like: id<100, and id>10.

    Futher, if user click the button again, another new selection list is shown, so users can do the search like: id<100, id >10 and age <50.

    Why I want this: is because some users may just need one search condition, some may need more, so I want the search condition is added when they need.

    I was suggested that Javascript can do this. Could I get some example?

    By the way, I search for some Javascripts, but all are a kind of pop-up windows or showing what uses input, not the one I am looking for. SO hope I could find an good example here. Thanks very much in advance.
     
    12345671, Oct 30, 2007 IP
  2. phper

    phper Active Member

    Messages:
    247
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #2
    Combination of JavaScript and CSS can do this. Setting an element's display CSS property to 'none' will hide the element.Setting the 'display' to 'block' or 'inline' will display it. I'll let you have a look yourself for more info about this 'display' property.

    Setting an element's CSS style from JavaScript will be something like:
    document.getElementById("someId").style.display = "none";
    Code (markup):

    If the items in the select drop down lists need to be populated dynamically as well, then you need to look into Ajax.
     
    phper, Oct 30, 2007 IP
  3. 12345671

    12345671 Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    thanks very much for you reply. I figure out how to make it. I didn't check the difference of inline and block. Later maybe.

    Here is my little example to share. my little contribution. Hope it could help some people like me , just need to grab an example quickly, and not a professional programmer.

    <html>
    <head>

    <script type='text/javascript'>
    function myfunction(){
    document.getElementById('degree').style.display = 'block'
    }
    </script>

    </head>
    <body>

    <form method="post" action="your action file">

    <select id="degree" name="degree">
    <?php
    for($i=0;$i<5;$i++){
    echo "<option>".$i."</option>";
    }
    ?>
    </select>

    <script type="text/javascript">
    document.getElementById("degree").style.display = "none"
    </script>

    <input type="button" id="click" onclick="myfunction()" value="add">
    <input type="submit" value="to you">
    </form>

    </body>
    </html>
     
    12345671, Nov 2, 2007 IP