SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    showing/hiding table on selection

    hello all,
    i got a selection tag which pulls values from DB to populate,i want to hide or show related div/table based on the selection. now i got two confusions. how can i know what is selected coz the option tag value is coming from DB, also i never work with show/hide thingy. how can i achieve it?
    All those who wander aren't lost.

  2. #2
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When an option is elected by the user, its value will be assigned to the <select> element. You can put an onchange event handler on the <select> which then show/hide the element referenced by the <select>'s value.

    Post the generated html for your <select> element.

  3. #3
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    a example would be helpful? i mean showing and hiding of div. against the selected <option>, whereas option is like
    PHP Code:
    <option value="<?=$sub_row['id']?><?=(in_array($sub_row['id'], $dealers_sub))?'selected':'';?>>
    All those who wander aren't lost.

  4. #4
    SitePoint Member binhosting's Avatar
    Join Date
    Nov 2011
    Location
    Spring, Texas
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the script.

    <script language="javascript">
    function showOptions(ele) {
    var Option1 = document.getElementById('Option1');
    var Option2 = document.getElementById('Option2');

    if(ele == "Option1") {
    Option1.style.display = 'block';
    Option2.style.display = 'none';

    }
    if(ele == "Option2") {
    Option1.style.display = 'none';
    Option2.style.display = 'block';
    }
    return false;

    }
    </script>


    <select name="myOptions" onchange="javascript:showOptions(this.value);">
    <option value="Option1">Show Option 1</option>
    <option value="Option2">Show Option2</option>
    </select>

    <div id="Option1" style="display:block">
    This is my Option1
    </div>
    <div id="Option2" style="display:none">
    This is my Option2
    </div>

  5. #5
    SitePoint Wizard nofel's Avatar
    Join Date
    Aug 2007
    Location
    Earth
    Posts
    1,766
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by webdev1958 View Post
    When an option is elected by the user, its value will be assigned to the <select> element. You can put an onchange event handler on the <select> which then show/hide the element referenced by the <select>'s value.

    Post the generated html for your <select> element.
    Code HTML4Strict:
     
     <select name="sub[]" id="sub" multiple="multiple" size="9" onChange="showcheckbox();">                                                         <option value="1" >                             100                            </option>                                                         <option value="2" > 
                                200                            </option>                                                         <option value="3" selected> 300                            </option>                                                         <option value="4" > 400                            </option>                                                         <option value="5" >                             500                            </option> 
                                                            <option value="6" >Only                            </option>                                                         <option value="7" >                              Union Dealers                            </option>                                                         <option value="8" >                              Posting                            </option>                                                         <option value="9" > 
                                 Posting                            </option>                                                       </select></td>
    All those who wander aren't lost.

  6. #6
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by binhosting View Post
    Here is the script.
    Code:
    <script language="javascript">
    function showOptions(ele) {
            var Option1 = document.getElementById('Option1');
            var Option2 = document.getElementById('Option2');
    
                if(ele == "Option1") {
                    Option1.style.display = 'block';
                    Option2.style.display = 'none';
    
                }
                if(ele == "Option2") {
                    Option1.style.display = 'none';
                    Option2.style.display = 'block';
                }
                return false;
    
      }
    </script>
    imo that's a messy way to do it because if the number of options returned from the db changes then you have to edit your javascript to suit.

    A better way could be to set up your javascript so that it doesn't matter how many options there are in the <select>. You just take the curent value of the <select>, then hide all the relevant elements and then just show the selected element.

  7. #7
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    <select name="sub[]" id="sub" multiple="multiple" size="9" onChange="showcheckbox();"
    ok, so your showcheckbox() first needs to hide all the show/hide elements. Then loop through the options (since you have multiple) and check if the option is selected. If it is then show the element referenced by the option's value.

    Post your javascript and we can try to help you get it working or there are lots of examples on google.


Bookmarks

Posting Permissions

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