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.
<script>
$(document).ready(function() {
var $e = $('.employees').hide();
$('.computers').change(function() {
var selection = $(this).val();
if(selection == '0') {
$e.hide();
}
else {
$e.show();
}
});
});
</script>
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.
Hey Pullo,
wie geht’s?
Thanks for looking at this!
// 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>
Hi,
Gut, danke - und dir?
Try something like this:
<!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.
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.
Oh, sorry.
In that case you can just use the attribute ends with selector:
var $groupASelect = $("select[name$='[amy]']"),
$groupBSelect = $("select[name$='[john]']");
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!
Hey no problem.
So what HTML is available when the page loads?
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.
<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>
Well, as the elements that you want to hide or show are siblings of the control elements, can you not do this:
var $e = $('.employees').hide();
$('.computers').change(function() {
var selection = $(this).val();
if(selection == '0') {
$(this).next().hide();
}
else {
$(this).next().show();
}
});
I tried that but nothing happens. The second select menu is hidden but changing the first menu’s values doesn’t do anything 
That’s a shame.
Here’s a fiddle of it working for me.
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
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?
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
<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>
No problem, just use a slightly different selector:
$(this).parent().next().find("select").show();
I’ve updated my fiddle accordingly.
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.
No problem.
Thanks for letting me know that this worked for you