SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show second item based on value of first item

    Hi everyone,

    I have groups of two select menus. When the page loads, the second select menu is hidden and only appears when the value of the first select menu has a value other than O. The two select menus for each grouping share the same name(key actually).

    Group A might be:

    <select class="computers" name="computers[amy]">
    <select class="employees" name="employees[amy]">

    Group B might be:

    <select class="computers" name="computers[john]">
    <select class="employees" name="employees[john]">

    The code below works but it makes all of the second menus appear instead of only for the specific group.

    Could someone please help me with this?

    Thank you.



    Code:
    <script>
    $(document).ready(function() {
    var $e = $('.employees').hide();
    
    $('.computers').change(function() {         
    var selection = $(this).val();
    
    if(selection  == '0') {
                $e.hide();
               } 
    else {
    $e.show();
            }
        });
    });
       
    </script>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,096
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    I would imagine that's because you're referencing them by class, but I might be wrong.

    If you provide the appropriate HTML, then I can help you further.

  3. #3
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Pullo,

    wie geht's?


    Thanks for looking at this!


    HTML Code:
    // group A
    
    <select class="computers" name="computers[amy]"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>
    
    <select class="employees" name="employees[amy]"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>
    
    
    // group B
    
    <select class="computers" name="computers[john]"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>
    
    <select class="employees" name="employees[john]"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>
    
    // group C
    
    <select class="computers" name="computers[chris]"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>
    
    <select class="employees" name="employees[chris]"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,096
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Gut, danke - und dir?

    Try something like this:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
    
      <body>
        <div id="groupA">
          <select class="computers" name="computers[amy]"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>
          <select class="employees" name="employees[amy]"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>
        </div>
    
          <div id="groupB">
          <select class="computers" name="computers[john]"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>
          <select class="employees" name="employees[john]"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>
        </div>
    
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script>
          var $groupASelect = $("#groupA select"),
              $groupBSelect = $("#groupB select");
    
           $groupBSelect.hide();
    
           $groupASelect.on("change", function(){
              var showGroupB = true;
              $groupASelect.each(function(){
                if($(this).val() === "0"){
                  showGroupB = false
                }
              })
    
              if(showGroupB){
                $groupBSelect.show();
              } else {
                $groupBSelect.hide();
              }
            })
        </script>
      </body>
    </html>
    This will deal with groups A and B.
    Try and expand it to include group C.

    Let me know how you get on.

  5. #5
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Danke, es geht so.

    Ok, thanks for getting back to me on this.

    I need to say that I haven't actually divided these menus into groups. The content is dynamically generated - each row I'm returning has two select menus. Once I select a value from a select menu, the second select menu from the same row(user id) is revealed.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,096
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Oh, sorry.

    In that case you can just use the attribute ends with selector:

    Code:
    var $groupASelect = $("select[name$='[amy]']"),
        $groupBSelect = $("select[name$='[john]']");

  7. #7
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo,


    I'm not using groups and the content is dynamic, so I don't know beforehand what the keys will be.


    Sorry, I know it's getting late - whenever you have time.



    Thanks!

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,096
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hey no problem.

    So what HTML is available when the page loads?

  9. #9
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, this is from the code I posted earlier. If the computers[amy] select menu has a value other than 0, then the employees[amy] select menu should appear, or if someone selects the computers[john] select menu, then the employees[john] select menu should pop up. The script I'm using works to a degree but causes all of the second select menus to appear instead of only the select menu with the same key.

    Thanks for your help. I wish I could do this on my own but JavaScript skills are useless.



    HTML Code:
    <select class="computers" name="computers[amy]"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>
    
    <select class="employees" name="employees[amy]"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>
    
    <select class="computers" name="computers[john]"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>
    
    <select class="employees" name="employees[john]"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>
    
    <select class="computers" name="computers[chris]"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>
    
    <select class="employees" name="employees[chris]"><option value="0">0</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option></select>

    <script>
    $(document).ready(function() {
    var $e = $('.employees').hide();

    $('.computers').change(function() {
    var selection = $(this).val();

    if(selection == '0') {
    $e.hide();
    }
    else {
    $e.show();
    }
    });
    });

    </script>

  10. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,096
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Well, as the elements that you want to hide or show are siblings of the control elements, can you not do this:

    Code:
    var $e = $('.employees').hide();
    
    $('.computers').change(function() { 
      var selection = $(this).val();
    
      if(selection == '0') {
        $(this).next().hide();
      } 
      else {
        $(this).next().show();
      }
    });

  11. #11
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that but nothing happens. The second select menu is hidden but changing the first menu's values doesn't do anything

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,096
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    That's a shame.

    Here's a fiddle of it working for me.

  13. #13
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a shame.
    That doesn't sound very sincere!


    So it does work after all. Sorry, my mistake, I had other tags between the select menus, such as paragraph tags which I used for headings(employees, computers). Do you think it's possible for the jQuery to skip over these tags and still access the second select menu?


    Thanks a lot

  14. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,096
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    I was being sincere. Honest

    It should be possible to do what you want, but I'll need to know what the other tags are which need skipping over.

    Could you post the complete HTML?

  15. #15
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was being sincere. Honest
    Okay, I believe you!

    I've got some div and paragraph tags between the select menus. If this doesn't work I might have to re-arrange a few things.

    Thanks


    HTML Code:
    <select class="employees" name="employees[amy]">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    </select>
    </div>
    <div>
    <p>computers</p>            
    <select class="computers" name="computers[amy]">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    </select>

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,096
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    No problem, just use a slightly different selector:

    Code:
    $(this).parent().next().find("select").show();
    I've updated my fiddle accordingly.

  17. #17
    SitePoint Addict
    Join Date
    Jul 2013
    Location
    South of the equator, then turn left
    Posts
    365
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Pullo,


    that's brilliant.


    You really do go out of your way to help people on this forum. I wish I knew half of what you know, so I wouldn't have to bang my head against the wall trying to get some code to work.


    Thanks again.

    Cheers for now.

  18. #18
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,096
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    No problem.

    Thanks for letting me know that this worked for you


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
  •