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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    89
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Showing / Hiding various div's using multiple select menu's

    Hello everyone,

    As you can see in the code below, I have two select menu's that can change the value of multiple div's at once to something else. This works, if I simply use only one select menu, the first one.

    The thing is, using the first select menu I can enable (testDiv1_on, testDiv2_on, and so on) multiple divs and also disable them. Now, I want to use the second select menu to only enable either the same divs or enable even more, but never to disable any.

    So, if I select "Example 1" in the first select menu, then both testDiv1 and testDiv2 are shown. If I select "Example 2" in the first select menu, then testDiv1 is hidden and testDiv2 is shown.

    What I basically need is for the second select menu to work, and to be able to enable divs based on the selection. Any help is greatly appreciated.

    PS. I am using multiple divs, so it's not only about two divs, this is just an example. I am doing this for 12 different divs.

    Code:
        <script>
        function testSelect1(value) {
        
            var index = {
                default: "testDiv1_off",
                1: "testDiv1_on",
                2: "testDiv1_off",
                3: "testDiv1_on",
                4: "testDiv1_off",
                5: "testDiv1_on"
            };
            document.getElementById("testDiv1").setAttribute("class", index[value]);
    
            var index = {
                default: "testDiv2_off",
                1: "testDiv2_on",
                2: "testDiv2_on",
                3: "testDiv2_on",
                4: "testDiv2_on",
                5: "testDiv2_off"
            };
            document.getElementById("testDiv2").setAttribute("class", index[value]);
        
        }
        
        function testSelect2(value) {
        
            var index = {
                2: "testDiv1_on",
                4: "testDiv1_on"
    	};
            document.getElementById("testDiv1").setAttribute("class", index[value]);
    
            var index = {
                1: "testDiv2_on",
                4: "testDiv2_on",
                5: "testDiv2_on"
            };
            document.getElementById("testDiv2").setAttribute("class", index[value]);
        
        }
        </script>
    
    
        <select onchange="testSelect1(this.value);">
        
        <option value="1">Example 1</option>
        <option value="2">Example 2</option>
        <option value="3">Example 3</option>
        <option value="4">Example 4</option>
        <option value="5">Example 5</option>
        
        </select>
        
        <select onchange="testSelect2(this.value);">
        
        <option value="1">Example 1</option>
        <option value="2">Example 2</option>
        <option value="3">Example 3</option>
        <option value="4">Example 4</option>
        <option value="5">Example 5</option>
        
        </select>
    
        <div id="testDiv1" class="testDiv1_off"></div>
        <div id="testDiv2" class="testDiv2_off"></div>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Think your missing something in your code. I assigned colors to the on/off options and things worked.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of the document</title>
    <script type="">
    function testSelect1(value) {
    var index = {
        default: "testDiv1_off",
        1: "testDiv1_on",
        2: "testDiv1_off",
        3: "testDiv1_on",
        4: "testDiv1_off",
        5: "testDiv1_on"
    };
    document.getElementById("testDiv1").setAttribute("class", index[value]);
    
    var index = {
        default: "testDiv2_off",
        1: "testDiv2_on",
        2: "testDiv2_on",
        3: "testDiv2_on",
        4: "testDiv2_on",
        5: "testDiv2_off"
    };
    document.getElementById("testDiv2").setAttribute("class", index[value]);
    
    }
    
    function testSelect2(value) {
    
        var index = {
            2: "testDiv1_on",
            4: "testDiv1_on"
    };
        document.getElementById("testDiv1").setAttribute("class", index[value]);
    
        var index = {
            1: "testDiv2_on",
            4: "testDiv2_on",
            5: "testDiv2_on"
        };
        document.getElementById("testDiv2").setAttribute("class", index[value]);
    
    }
    </script>
    <style type="text/css">
    .testDiv1_on{
    	background-color: green;
    }
    .testDiv1_off{
    	background-color: red;
    }
    .testDiv2_on{
    	background-color: green;
    }
    .testDiv2_off{
    	background-color: red;
    }
    #testDiv1{
    	height: 100px;
    	width: 100px;
    }
    #testDiv2{
    	height: 100px;
    	width: 100px;
    }
    </style>
    </head>
    
    <body>
    
    <select onchange="testSelect1(this.value);">
    <option></option>
    <option value="1">Example 1</option>
    <option value="2">Example 2</option>
    <option value="3">Example 3</option>
    <option value="4">Example 4</option>
    <option value="5">Example 5</option>
    
    </select>
    
    <select onchange="testSelect2(this.value);">
    <option></option>
    <option value="1">Example 1</option>
    <option value="2">Example 2</option>
    <option value="3">Example 3</option>
    <option value="4">Example 4</option>
    <option value="5">Example 5</option>
    
    </select>
    
    <div id="testDiv1" class="testDiv1_off">testDiv1</div><br /><br /><br />
    <div id="testDiv2" class="testDiv2_off">testDiv2</div>
    </body>
    
    </html>
    Evolution - The non-random survival of random variants.

  • Users who have thanked sunfighter for this post:

    Hardist (10-04-2013)

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    89
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Thanks!

    But sorry, but it doesn't work how it should. When selecting the color "red" for example for either div using the first select, upon changing the second select menu, the colors set by the first select should not be changed. That is my problem exactly ^^

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Quote Originally Posted by Hardist View Post
    Thanks!

    But sorry, but it doesn't work how it should.
    It works like you coded it! I changed nothing except to see what was suppose to happen. Example 1, Example 2 is a little vague.

    Quote Originally Posted by Hardist View Post
    When selecting the color "red" for example for either div
    How do we know what we're selecting? Example 1, Example 2 is a little vague.

    Selecting Example 3 in the second dropdown just makes everything disappear because you have nothing picked for it.

    Why not tell us what each selection SHOULD do and we can go from there.
    Evolution - The non-random survival of random variants.

  • #5
    New Coder
    Join Date
    Apr 2012
    Posts
    89
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    It works like you coded it!
    That is the problem, if it would work like I coded it, I wouldn't ask for help here

    Anyway, simple example. If you test out your script from above, select the second option from the first select box. That makes the second div green. Now, when selecting the second or third option from the second select box, the second div should STAY green because that was selected with the first select box.

    And that is the whole issue, how should it be coded that when you select a div to be ON using the first dropdown, it will not disappear when selecting something from the second dropdown?

    The thing is, when I select an option from the first dropdown, a bunch of divs will be enabled. Then, when selecting an option from the second dropdown, either a bunch of extra divs will be enabled, or no extra divs will be enabled, but the ones selected in the first dropdown should NOT be disabled.

    I hope that is more clear My apologies for the lame example script but that is the best I could think of to try to make it clear.

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Quote Originally Posted by Hardist View Post
    That is the problem, if it would work like I coded it, I wouldn't ask for help here
    Again: It is working the way you coded it.

    What you want from looking at function testSelect2 is to turn both on, ie. green. so use this:
    Code:
    function testSelect2(value) {
    
        var index = {
            1: "testDiv1_on",
            2: "testDiv1_on",
            3: "testDiv1_on",
            4: "testDiv1_on",
            5: "testDiv1_on"
    };
        document.getElementById("testDiv1").setAttribute("class", index[value]);
    
        var index = {
            1: "testDiv2_on",
    	2: "testDiv2_on",
        	3: "testDiv2_on",
            4: "testDiv2_on",
            5: "testDiv2_on"
        };
        document.getElementById("testDiv2").setAttribute("class", index[value]);
    
    }
    and nothing disappears
    Evolution - The non-random survival of random variants.

  • #7
    New Coder
    Join Date
    Apr 2012
    Posts
    89
    Thanks
    15
    Thanked 0 Times in 0 Posts
    I know that works, although that's exactly what I don't want because I have several divs and several values which do different things. I will try to explain it another way.

    I have 12 divs. They are all aligned next to each other. With the first dropdown I select the 1st option, which enables div1, div2, div3 and div4. They turn green, if you will. Then, I select the 1st option from the second dropdown, which enables div5 and div6.

    Next time, I select the 2nd option from the first dropdown, which enables div11 and div12. Then, I select the 1st option from the second dropdown again, which enables div5 and div6, but NOT div1 till div4 like in the previous example. Those only need to be enabled when I select the 1st option from the first dropdown.

    And like that every option I select enables different divs, what I basically need from the second dropdown is to never disable anything, only enable additional divs if needed.

    I hope that's clear
    Last edited by Hardist; 10-03-2013 at 06:40 PM.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    Maybe you should use
    Code:
    	document.getElementById("testDiv1").setAttribute("class", "testDiv1_on");
    Why not list what is turned on and off for each option.
    Evolution - The non-random survival of random variants.

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Would it be better and simpler if the options are presented as checkboxes instead of dropdowns?

  • #10
    New Coder
    Join Date
    Apr 2012
    Posts
    89
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Thanks sunfighter, will try that out soon

    And no, I need to use dropdowns. Hard to explain ^^

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Is this related to your other post? This will help us understand the background of what you're trying to do more.

  • #12
    New Coder
    Join Date
    Apr 2012
    Posts
    89
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Maybe you should use
    Code:
    	document.getElementById("testDiv1").setAttribute("class", "testDiv1_on");
    Tried playing around with this but couldn't get it to work. Can I put some sort of a if value = 1 then setAttribute option? Kinda like this:

    Code:
    document.getElementById("testDiv1").style.display = (value == "1") ? "block" : "none";
    Quote Originally Posted by glenngv View Post
    Is this related to your other post? This will help us understand the background of what you're trying to do more.
    Yes it is, but if I start putting everything together, you won't understand at all what I am talking about. This is basically unrelated to what I am trying to do with the other stuff. But I will still try to explain.

    What I have is a page, a "build creator" for a game. You can have either a 1-handed weapon, which has 3 main skills, and a 2-handed weapon, which has 5 skills. If you select a 1-handed weapon, you can also select an off-hand weapon (which is the second select box). Those are the other 2 skills. Totally unrelated for this post though. But here it comes.

    Each weapon has it's own "conditions" that can be put on an enemy, when you use that weapon. For example, if you select the axe, it has 4 conditions on various of the skills. So, when selecting the axe in the 1st dropdown, 3 skills will be shown, but also 4 of those hidden divs, which are the 4 conditions.

    Now, you can select another (off-hand) weapon in the other dropdown. That weapon also has it's own conditions, for example a shield has 1 condition, another axe has 2 more conditions, and so on. And there are like 7 weapons, each with their own conditions. So, when selecting a weapon from the 1st dropdown, it will not only display 3 or 5 skills, but also it will "light up" / "enable" all of the conditions that can be applied with that weapon, and those are the 12 divs.

    I hope I didn't make everything too confusing now. I can post a better example if I have to but that will take some time to make. The whole code or just bits of it is just too much to post here.
    Last edited by Hardist; 10-03-2013 at 09:14 PM.

  • #13
    New Coder
    Join Date
    Apr 2012
    Posts
    89
    Thanks
    15
    Thanked 0 Times in 0 Posts
    I have been playing around with the code the whole night, and now suddenly I think it is working. I used the original code posted here, and played around with it, and it worked. So I went back to my own code, did the same and it is working. Which I find very strange. I am going to finish the code and see what will happen, and report back here and thank everyone for their time and apologise.

    See you soon..

  • #14
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,763
    Thanks
    23
    Thanked 548 Times in 547 Posts
    And just for the hell of it here something else to contemplate:
    Code:
    function testSelect2(value){
    	switch (Number(value)){
    		case 1:
    			document.getElementById("testDiv2").setAttribute("class", "testDiv2_on");
    			break;
    		case 2:
    			document.getElementById("testDiv1").setAttribute("class", "testDiv1_on");
    			break;
    		case 3:
    			break;
    		case 4:
    			document.getElementById("testDiv2").setAttribute("class", "testDiv2_on");
    			document.getElementById("testDiv1").setAttribute("class", "testDiv1_on");
    			break;
    		case 5:
    			document.getElementById("testDiv2").setAttribute("class", "testDiv2_on");
    			break;
    	}
    }
    Evolution - The non-random survival of random variants.

  • #15
    New Coder
    Join Date
    Apr 2012
    Posts
    89
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Okay I give up for tonight. The thing is actually, when the 1st dropdown enables the first div, but the 2nd dropdown does that aswell, it works. If I change the 2nd dropdown then, it disables the first div, but it shouldn't.

    Explanation: The weapon "axe" has a condition "bleed". I select the "axe" in the 1st dropdown. It enables the div "bleed". Now, I select any weapon in the 2nd dropdown that also has "bleed". Nothing changes. But I select any other weapon from the 2nd dropdown that hasn't got the "bleed", it will disable the "bleed", but it shouldn't, since the "axe" is still selected in the 1st dropdown and that has "bleed" enabled.

    Tried the above code quick, didn't work either for me but that can be because I haven't tested it properly yet, will give that a go tomorrow because if that works, it could solve the problems.

    Thanks !!


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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