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 5 of 5

Thread: Display Listbox

  1. #1
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Display Listbox

    Hi,

    I have an application wherein for one page I want to display a Listbox on selection of a radio button.
    There should be 2 radio buttons and when the user clicks on the 2nd one "My Process", a list box should be displayed with several options.

    Can anybody pls help me with this as I'm a beginner to JS..


    Many thanks
    Pooja.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Here you are:-

    Code:
    <script type = "text/javascript">
    function showListBox() {
    document.getElementById("div1").style.display="block";
    }
    </script>
    
    <form name = "myform">
    Something <input type = "radio" name = "rad1">
    My Process <input type = "radio" name = "rad1" onclick = "showListBox()">
    <br><br>
    <div id = "div1" style="display:none">
    <select name = 'list1' id = 'list1' >
    <option selected value=""> Choose A Fruit</option>
    <option value='Mango'> Mango </option>
    <option value='Apple'> Apple </option>
    <option value='Orange'> Orange </option>
    <option value='Watermelon'> Watermelon </option>
    <option value='Plum'> Plum </option>
    </select>
    </div>
    </form>
    What happens if the user changes his mind and clicks the first button after selecting the second button?

    "A man would do nothing, if he waited until he could do it so well that no one at all would find fault with what he has done." - Cardinal Newman

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up Suggestion ...

    Quote Originally Posted by Philip M View Post
    Here you are:-
    ....
    What happens if the user changes his mind and clicks the first button after selecting the second button?
    ....
    My suggestion would be to hide the list again and test display status (block || none) to determine if listbox selection is to be ignored or not.

    Code:
    <script type = "text/javascript">
    function showListBox(flag) {
      var sel = document.getElementById("div1");
      if (flag) { sel.style.display="block"; } else { sel.style.display='none'; }
    }
    </script>
    
    <form name = "myform">
    Something <input type = "radio" name = "rad1" onclick = showListBox(false)>
    My Process <input type = "radio" name = "rad1" onclick = "showListBox(true)">
    <br><br>
    <div id = "div1" style="display:none">
    <select name = 'list1' id = 'list1' >
    <option selected value=""> Choose A Fruit</option>
    <option value='Mango'> Mango </option>
    <option value='Apple'> Apple </option>
    <option value='Orange'> Orange </option>
    <option value='Watermelon'> Watermelon </option>
    <option value='Plum'> Plum </option>
    </select>
    </div>
    </form>

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,982
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by jmrker View Post
    My suggestion would be to hide the list again and test display status (block || none) to determine if listbox selection is to be ignored or not.
    Yes, but you need to set the selected index back to 0, otherwise the selection remains active (and would be submitted in a form) even if the div is hidden. So I had (but waiting for the OP to say what he wanted! )

    Code:
    <script type = "text/javascript">
    function showListBox() {
    document.getElementById("div1").style.display="block";
    }
    
    function hideListBox() {
    document.getElementById("div1").style.display="none";
    document.getElementById("list1").selectedIndex = 0;  // cancel any selection made
    }
    
    </script>
    
    <form name = "myform">
    Something <input type = "radio" name = "rad1" onclick = "hideListBox()">
    My Process <input type = "radio" name = "rad1" onclick = "showListBox()">

  • Users who have thanked Philip M for this post:

    pdilipm (04-15-2010)

  • #5
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Philip M,
    I tried yer code and it works beautifully. Only change I made is changing dropdown to multi-select list box. Yes, if the user changes his selection, I want the list box to hide.

    Thanks alot for yer help


  •  

    Posting Permissions

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