Jquery change div depending on options
1
I’m building a basic module, for a fictional toy store.
Basic Idea is two option select boxes First one chooses the type of kit (Car, Truck or Big Truck) and the second shows the number of parts.
I have got the code working the way it needs to but I have had to break one rule of the task: I had to rename one of the option values to remove a space in it which I am not allowed to do...
This is the option I had to change:
<option value="BigTruck">Big Truck</option> <--- works if i take the space out
<option value="Big Truck">Big Truck</option> <-- put the space in and it doesnt work as intended
I have attached a jsfiddle with my code, can someone tell me, why/if the space in the option value makes a difference, and if I can adjust my existing js to account for that space that would be great, it's doing my head in...
I have tried "hypothetically" adding a instead of the space in the option value, and the code still fails to work as it should, so I'm not 100% whether it is the space causing the problem or not...
http://jsfiddle.net/baddog04061980/wtm1dLs2
$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
$('#' + $('#option-kit').val() + $('#option-parts').val()).show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit">
Kit
</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">
Parts
</label>
<select id="option-parts">
<option value="12" selected="">
12
</option>
<option value="18">
18
</option>
<option value="24">
24
</option>
<option value="30">
30
</option>
<option value="36">
36
</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts
</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>jquery option
edited Nov 11 at 11:16
mplungjan
86.7k20122181
asked Nov 11 at 11:12
Justin Brown
435
add a comment |
1
I’m building a basic module, for a fictional toy store.
Basic Idea is two option select boxes First one chooses the type of kit (Car, Truck or Big Truck) and the second shows the number of parts.
I have got the code working the way it needs to but I have had to break one rule of the task: I had to rename one of the option values to remove a space in it which I am not allowed to do...
This is the option I had to change:
<option value="BigTruck">Big Truck</option> <--- works if i take the space out
<option value="Big Truck">Big Truck</option> <-- put the space in and it doesnt work as intended
I have attached a jsfiddle with my code, can someone tell me, why/if the space in the option value makes a difference, and if I can adjust my existing js to account for that space that would be great, it's doing my head in...
I have tried "hypothetically" adding a instead of the space in the option value, and the code still fails to work as it should, so I'm not 100% whether it is the space causing the problem or not...
http://jsfiddle.net/baddog04061980/wtm1dLs2
$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
$('#' + $('#option-kit').val() + $('#option-parts').val()).show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit">
Kit
</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">
Parts
</label>
<select id="option-parts">
<option value="12" selected="">
12
</option>
<option value="18">
18
</option>
<option value="24">
24
</option>
<option value="30">
30
</option>
<option value="36">
36
</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts
</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>jquery option
edited Nov 11 at 11:16
mplungjan
86.7k20122181
asked Nov 11 at 11:12
Justin Brown
435
add a comment |
1
1
1
I’m building a basic module, for a fictional toy store.
Basic Idea is two option select boxes First one chooses the type of kit (Car, Truck or Big Truck) and the second shows the number of parts.
I have got the code working the way it needs to but I have had to break one rule of the task: I had to rename one of the option values to remove a space in it which I am not allowed to do...
This is the option I had to change:
<option value="BigTruck">Big Truck</option> <--- works if i take the space out
<option value="Big Truck">Big Truck</option> <-- put the space in and it doesnt work as intended
I have attached a jsfiddle with my code, can someone tell me, why/if the space in the option value makes a difference, and if I can adjust my existing js to account for that space that would be great, it's doing my head in...
I have tried "hypothetically" adding a instead of the space in the option value, and the code still fails to work as it should, so I'm not 100% whether it is the space causing the problem or not...
http://jsfiddle.net/baddog04061980/wtm1dLs2
$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
$('#' + $('#option-kit').val() + $('#option-parts').val()).show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit">
Kit
</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">
Parts
</label>
<select id="option-parts">
<option value="12" selected="">
12
</option>
<option value="18">
18
</option>
<option value="24">
24
</option>
<option value="30">
30
</option>
<option value="36">
36
</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts
</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>jquery option
edited Nov 11 at 11:16
mplungjan
86.7k20122181
asked Nov 11 at 11:12
Justin Brown
435
I’m building a basic module, for a fictional toy store.
Basic Idea is two option select boxes First one chooses the type of kit (Car, Truck or Big Truck) and the second shows the number of parts.
I have got the code working the way it needs to but I have had to break one rule of the task: I had to rename one of the option values to remove a space in it which I am not allowed to do...
This is the option I had to change:
<option value="BigTruck">Big Truck</option> <--- works if i take the space out
<option value="Big Truck">Big Truck</option> <-- put the space in and it doesnt work as intended
I have attached a jsfiddle with my code, can someone tell me, why/if the space in the option value makes a difference, and if I can adjust my existing js to account for that space that would be great, it's doing my head in...
I have tried "hypothetically" adding a instead of the space in the option value, and the code still fails to work as it should, so I'm not 100% whether it is the space causing the problem or not...
http://jsfiddle.net/baddog04061980/wtm1dLs2
$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
$('#' + $('#option-kit').val() + $('#option-parts').val()).show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit">
Kit
</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">
Parts
</label>
<select id="option-parts">
<option value="12" selected="">
12
</option>
<option value="18">
18
</option>
<option value="24">
24
</option>
<option value="30">
30
</option>
<option value="36">
36
</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts
</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
$('#' + $('#option-kit').val() + $('#option-parts').val()).show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit">
Kit
</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">
Parts
</label>
<select id="option-parts">
<option value="12" selected="">
12
</option>
<option value="18">
18
</option>
<option value="24">
24
</option>
<option value="30">
30
</option>
<option value="36">
36
</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts
</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
$('#' + $('#option-kit').val() + $('#option-parts').val()).show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit">
Kit
</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">
Parts
</label>
<select id="option-parts">
<option value="12" selected="">
12
</option>
<option value="18">
18
</option>
<option value="24">
24
</option>
<option value="30">
30
</option>
<option value="36">
36
</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts
</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>jquery option
jquery option
edited Nov 11 at 11:16
mplungjan
86.7k20122181
asked Nov 11 at 11:12
Justin Brown
435
edited Nov 11 at 11:16
mplungjan
86.7k20122181
asked Nov 11 at 11:12
Justin Brown
435
edited Nov 11 at 11:16
mplungjan
86.7k20122181
edited Nov 11 at 11:16
mplungjan
86.7k20122181
edited Nov 11 at 11:16
mplungjan
86.7k20122181
86.7k20122181
asked Nov 11 at 11:12
Justin Brown
435
asked Nov 11 at 11:12
Justin Brown
435
asked Nov 11 at 11:12
Justin Brown
435
435
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
0
Your option BigTruck has white spaces.
- It's not recommended use id whith white spaces
But if you want resolve this problem, without made id changes, you can replace white spaces:
$('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
- Live example http://jsfiddle.net/c2f3uq17/1/
Your snippet whit the changes:
$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
$('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit"> Kit</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">Parts</label>
<select id="option-parts">
<option value="12" selected="">12</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="30">30</option>
<option value="36">36</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>answered Nov 11 at 11:38
ℛɑƒæĿ
1,01221125
Thanks for responses, everyone. I'll place odds when I go to my community college class the instructor will be like "Haha ID's can't have spaces, so the example won't work, I did that intentionally", but it's nice to know there is a workaround for it IF there was no other way...
– Justin Brown
Nov 12 at 3:07
@JustinBrown I would contest that my suggestions are more relevant since they work without changing the HTML or ID assuming the original ID had whitespaces and was answered 15 minutes before this one
– mplungjan
Nov 12 at 17:52
add a comment |
0
Your DIV id was "BigTruck12" so your selector needs to match so why not just not have spaces?
It is not recommended/allowed to have spaces in the ID, your issue is a good reason why.
Ways to get the element anyway:
- Use the id attribute:
$('[id="'+idWithSpaces+'"]') - escape the spaces:
id = id.replace(/ /g,"\ "); - Use DOM
document.getElementById(id);
$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
var id = $('#option-kit').val() + $('#option-parts').val();
id = id.replace(/ /g,"\ ");
$('#'+id).show();
// $('[id="' + id + '"]').show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit">Kit</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">Parts</label>
<select id="option-parts">
<option value="12" selected="">12</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="30">30</option>
<option value="36">36</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="Big Truck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="Big Truck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="Big Truck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="Big Truck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="Big Truck36" class="choice-boxs">Big Truck and 36 Parts</div>answered Nov 11 at 11:23
mplungjan
86.7k20122181
add a comment |
-1
id attributes can't contain spaces. See What are valid values for the id attribute in HTML?. So I suggest you use BigTrucknnn both in the option and below when you set the id on the div's.
edited Nov 11 at 11:32
Zoe
11k73675
answered Nov 11 at 11:31
jonasdev
864
Yes they can, but the selector cannot use$("#something with spaces")it needs to be$("#something\ with\ spaces")
– mplungjan
Nov 11 at 11:38
Well, you are correct: technically they "can", but if they do, they don't follow HTML specification (see link in my original response).
– jonasdev
Nov 11 at 12:23
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53248137%2fjquery-change-div-depending-on-options%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Your option BigTruck has white spaces.
- It's not recommended use id whith white spaces
But if you want resolve this problem, without made id changes, you can replace white spaces:
$('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
- Live example http://jsfiddle.net/c2f3uq17/1/
Your snippet whit the changes:
$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
$('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit"> Kit</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">Parts</label>
<select id="option-parts">
<option value="12" selected="">12</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="30">30</option>
<option value="36">36</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>answered Nov 11 at 11:38
ℛɑƒæĿ
1,01221125
Thanks for responses, everyone. I'll place odds when I go to my community college class the instructor will be like "Haha ID's can't have spaces, so the example won't work, I did that intentionally", but it's nice to know there is a workaround for it IF there was no other way...
– Justin Brown
Nov 12 at 3:07
@JustinBrown I would contest that my suggestions are more relevant since they work without changing the HTML or ID assuming the original ID had whitespaces and was answered 15 minutes before this one
– mplungjan
Nov 12 at 17:52
add a comment |
0
Your option BigTruck has white spaces.
- It's not recommended use id whith white spaces
But if you want resolve this problem, without made id changes, you can replace white spaces:
$('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
- Live example http://jsfiddle.net/c2f3uq17/1/
Your snippet whit the changes:
$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
$('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit"> Kit</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">Parts</label>
<select id="option-parts">
<option value="12" selected="">12</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="30">30</option>
<option value="36">36</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>answered Nov 11 at 11:38
ℛɑƒæĿ
1,01221125
Thanks for responses, everyone. I'll place odds when I go to my community college class the instructor will be like "Haha ID's can't have spaces, so the example won't work, I did that intentionally", but it's nice to know there is a workaround for it IF there was no other way...
– Justin Brown
Nov 12 at 3:07
@JustinBrown I would contest that my suggestions are more relevant since they work without changing the HTML or ID assuming the original ID had whitespaces and was answered 15 minutes before this one
– mplungjan
Nov 12 at 17:52
add a comment |
0
0
0
Your option BigTruck has white spaces.
- It's not recommended use id whith white spaces
But if you want resolve this problem, without made id changes, you can replace white spaces:
$('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
- Live example http://jsfiddle.net/c2f3uq17/1/
Your snippet whit the changes:
$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
$('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit"> Kit</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">Parts</label>
<select id="option-parts">
<option value="12" selected="">12</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="30">30</option>
<option value="36">36</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>answered Nov 11 at 11:38
ℛɑƒæĿ
1,01221125
Your option BigTruck has white spaces.
- It's not recommended use id whith white spaces
But if you want resolve this problem, without made id changes, you can replace white spaces:
$('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
- Live example http://jsfiddle.net/c2f3uq17/1/
Your snippet whit the changes:
$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
$('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit"> Kit</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">Parts</label>
<select id="option-parts">
<option value="12" selected="">12</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="30">30</option>
<option value="36">36</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
$('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit"> Kit</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">Parts</label>
<select id="option-parts">
<option value="12" selected="">12</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="30">30</option>
<option value="36">36</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
$('#' + $('#option-kit').val().replace(' ','') + $('#option-parts').val()).show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit"> Kit</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">Parts</label>
<select id="option-parts">
<option value="12" selected="">12</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="30">30</option>
<option value="36">36</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="BigTruck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="BigTruck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="BigTruck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="BigTruck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="BigTruck36" class="choice-boxs">Big Truck and 36 Parts</div>answered Nov 11 at 11:38
ℛɑƒæĿ
1,01221125
answered Nov 11 at 11:38
ℛɑƒæĿ
1,01221125
answered Nov 11 at 11:38
ℛɑƒæĿ
1,01221125
answered Nov 11 at 11:38
ℛɑƒæĿ
1,01221125
1,01221125
Thanks for responses, everyone. I'll place odds when I go to my community college class the instructor will be like "Haha ID's can't have spaces, so the example won't work, I did that intentionally", but it's nice to know there is a workaround for it IF there was no other way...
– Justin Brown
Nov 12 at 3:07
@JustinBrown I would contest that my suggestions are more relevant since they work without changing the HTML or ID assuming the original ID had whitespaces and was answered 15 minutes before this one
– mplungjan
Nov 12 at 17:52
add a comment |
Thanks for responses, everyone. I'll place odds when I go to my community college class the instructor will be like "Haha ID's can't have spaces, so the example won't work, I did that intentionally", but it's nice to know there is a workaround for it IF there was no other way...
– Justin Brown
Nov 12 at 3:07
@JustinBrown I would contest that my suggestions are more relevant since they work without changing the HTML or ID assuming the original ID had whitespaces and was answered 15 minutes before this one
– mplungjan
Nov 12 at 17:52
Thanks for responses, everyone. I'll place odds when I go to my community college class the instructor will be like "Haha ID's can't have spaces, so the example won't work, I did that intentionally", but it's nice to know there is a workaround for it IF there was no other way...
– Justin Brown
Nov 12 at 3:07
Thanks for responses, everyone. I'll place odds when I go to my community college class the instructor will be like "Haha ID's can't have spaces, so the example won't work, I did that intentionally", but it's nice to know there is a workaround for it IF there was no other way...
– Justin Brown
Nov 12 at 3:07
@JustinBrown I would contest that my suggestions are more relevant since they work without changing the HTML or ID assuming the original ID had whitespaces and was answered 15 minutes before this one
– mplungjan
Nov 12 at 17:52
@JustinBrown I would contest that my suggestions are more relevant since they work without changing the HTML or ID assuming the original ID had whitespaces and was answered 15 minutes before this one
– mplungjan
Nov 12 at 17:52
add a comment |
0
Your DIV id was "BigTruck12" so your selector needs to match so why not just not have spaces?
It is not recommended/allowed to have spaces in the ID, your issue is a good reason why.
Ways to get the element anyway:
- Use the id attribute:
$('[id="'+idWithSpaces+'"]') - escape the spaces:
id = id.replace(/ /g,"\ "); - Use DOM
document.getElementById(id);
$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
var id = $('#option-kit').val() + $('#option-parts').val();
id = id.replace(/ /g,"\ ");
$('#'+id).show();
// $('[id="' + id + '"]').show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit">Kit</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">Parts</label>
<select id="option-parts">
<option value="12" selected="">12</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="30">30</option>
<option value="36">36</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="Big Truck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="Big Truck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="Big Truck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="Big Truck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="Big Truck36" class="choice-boxs">Big Truck and 36 Parts</div>answered Nov 11 at 11:23
mplungjan
86.7k20122181
add a comment |
0
Your DIV id was "BigTruck12" so your selector needs to match so why not just not have spaces?
It is not recommended/allowed to have spaces in the ID, your issue is a good reason why.
Ways to get the element anyway:
- Use the id attribute:
$('[id="'+idWithSpaces+'"]') - escape the spaces:
id = id.replace(/ /g,"\ "); - Use DOM
document.getElementById(id);
$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
var id = $('#option-kit').val() + $('#option-parts').val();
id = id.replace(/ /g,"\ ");
$('#'+id).show();
// $('[id="' + id + '"]').show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit">Kit</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">Parts</label>
<select id="option-parts">
<option value="12" selected="">12</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="30">30</option>
<option value="36">36</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="Big Truck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="Big Truck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="Big Truck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="Big Truck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="Big Truck36" class="choice-boxs">Big Truck and 36 Parts</div>answered Nov 11 at 11:23
mplungjan
86.7k20122181
add a comment |
0
0
0
Your DIV id was "BigTruck12" so your selector needs to match so why not just not have spaces?
It is not recommended/allowed to have spaces in the ID, your issue is a good reason why.
Ways to get the element anyway:
- Use the id attribute:
$('[id="'+idWithSpaces+'"]') - escape the spaces:
id = id.replace(/ /g,"\ "); - Use DOM
document.getElementById(id);
$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
var id = $('#option-kit').val() + $('#option-parts').val();
id = id.replace(/ /g,"\ ");
$('#'+id).show();
// $('[id="' + id + '"]').show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit">Kit</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">Parts</label>
<select id="option-parts">
<option value="12" selected="">12</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="30">30</option>
<option value="36">36</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="Big Truck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="Big Truck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="Big Truck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="Big Truck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="Big Truck36" class="choice-boxs">Big Truck and 36 Parts</div>answered Nov 11 at 11:23
mplungjan
86.7k20122181
Your DIV id was "BigTruck12" so your selector needs to match so why not just not have spaces?
It is not recommended/allowed to have spaces in the ID, your issue is a good reason why.
Ways to get the element anyway:
- Use the id attribute:
$('[id="'+idWithSpaces+'"]') - escape the spaces:
id = id.replace(/ /g,"\ "); - Use DOM
document.getElementById(id);
$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
var id = $('#option-kit').val() + $('#option-parts').val();
id = id.replace(/ /g,"\ ");
$('#'+id).show();
// $('[id="' + id + '"]').show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit">Kit</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">Parts</label>
<select id="option-parts">
<option value="12" selected="">12</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="30">30</option>
<option value="36">36</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="Big Truck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="Big Truck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="Big Truck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="Big Truck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="Big Truck36" class="choice-boxs">Big Truck and 36 Parts</div>$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
var id = $('#option-kit').val() + $('#option-parts').val();
id = id.replace(/ /g,"\ ");
$('#'+id).show();
// $('[id="' + id + '"]').show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit">Kit</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">Parts</label>
<select id="option-parts">
<option value="12" selected="">12</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="30">30</option>
<option value="36">36</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="Big Truck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="Big Truck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="Big Truck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="Big Truck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="Big Truck36" class="choice-boxs">Big Truck and 36 Parts</div>$(document).ready(function()
$('.choice-boxs').hide();
$('#Car12').show();
$("#option-kit, #option-parts").on("change", function()
$('.choice-boxs').hide();
var id = $('#option-kit').val() + $('#option-parts').val();
id = id.replace(/ /g,"\ ");
$('#'+id).show();
// $('[id="' + id + '"]').show();
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="option-selectors">
<div class="selector-wrapper cf">
<label for="option-kit">Kit</label>
<select id="option-kit">
<option value="Car" selected="">Car</option>
<option value="Truck">Truck</option>
<option value="Big Truck">Big Truck</option>
</select>
</div>
<div class="selector-wrapper cf">
<label for="option-parts">Parts</label>
<select id="option-parts">
<option value="12" selected="">12</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="30">30</option>
<option value="36">36</option>
</select>
</div>
</div>
<!-- Basic -->
<div id="Car12" class="choice-boxs">Car and 12 Parts</div>
<div id="Car18" class="choice-boxs">Car and 18 Parts</div>
<div id="Car24" class="choice-boxs">Car and 24 Parts</div>
<div id="Car30" class="choice-boxs">Car and 30 Parts</div>
<div id="Car36" class="choice-boxs">Car and 3 Parts6</div>
<!-- Deluxe -->
<div id="Truck12" class="choice-boxs">Truck and 12 Parts</div>
<div id="Truck18" class="choice-boxs">Truck and 18 Parts</div>
<div id="Truck24" class="choice-boxs">Truck and 24 Parts</div>
<div id="Truck30" class="choice-boxs">Truck and 30 Parts</div>
<div id="Truck36" class="choice-boxs">Truck and 36 Parts</div>
<!-- Deluxe -->
<div id="Big Truck12" class="choice-boxs">Big Truck and 12 Parts</div>
<div id="Big Truck18" class="choice-boxs">Big Truck and 18 Parts</div>
<div id="Big Truck24" class="choice-boxs">Big Truck and 24 Parts</div>
<div id="Big Truck30" class="choice-boxs">Big Truck and 30 Parts</div>
<div id="Big Truck36" class="choice-boxs">Big Truck and 36 Parts</div>answered Nov 11 at 11:23
mplungjan
86.7k20122181
edited Nov 11 at 13:09
answered Nov 11 at 11:23
mplungjan
86.7k20122181
answered Nov 11 at 11:23
mplungjan
86.7k20122181
answered Nov 11 at 11:23
mplungjan
86.7k20122181
86.7k20122181
add a comment |
add a comment |
-1
id attributes can't contain spaces. See What are valid values for the id attribute in HTML?. So I suggest you use BigTrucknnn both in the option and below when you set the id on the div's.
edited Nov 11 at 11:32
Zoe
11k73675
answered Nov 11 at 11:31
jonasdev
864
Yes they can, but the selector cannot use$("#something with spaces")it needs to be$("#something\ with\ spaces")
– mplungjan
Nov 11 at 11:38
Well, you are correct: technically they "can", but if they do, they don't follow HTML specification (see link in my original response).
– jonasdev
Nov 11 at 12:23
add a comment |
-1
id attributes can't contain spaces. See What are valid values for the id attribute in HTML?. So I suggest you use BigTrucknnn both in the option and below when you set the id on the div's.
edited Nov 11 at 11:32
Zoe
11k73675
answered Nov 11 at 11:31
jonasdev
864
Yes they can, but the selector cannot use$("#something with spaces")it needs to be$("#something\ with\ spaces")
– mplungjan
Nov 11 at 11:38
Well, you are correct: technically they "can", but if they do, they don't follow HTML specification (see link in my original response).
– jonasdev
Nov 11 at 12:23
add a comment |
-1
-1
-1
id attributes can't contain spaces. See What are valid values for the id attribute in HTML?. So I suggest you use BigTrucknnn both in the option and below when you set the id on the div's.
edited Nov 11 at 11:32
Zoe
11k73675
answered Nov 11 at 11:31
jonasdev
864
id attributes can't contain spaces. See What are valid values for the id attribute in HTML?. So I suggest you use BigTrucknnn both in the option and below when you set the id on the div's.
edited Nov 11 at 11:32
Zoe
11k73675
answered Nov 11 at 11:31
jonasdev
864
edited Nov 11 at 11:32
Zoe
11k73675
edited Nov 11 at 11:32
Zoe
11k73675
edited Nov 11 at 11:32
Zoe
11k73675
11k73675
answered Nov 11 at 11:31
jonasdev
864
answered Nov 11 at 11:31
jonasdev
864
answered Nov 11 at 11:31
jonasdev
864
864
Yes they can, but the selector cannot use$("#something with spaces")it needs to be$("#something\ with\ spaces")
– mplungjan
Nov 11 at 11:38
Well, you are correct: technically they "can", but if they do, they don't follow HTML specification (see link in my original response).
– jonasdev
Nov 11 at 12:23
add a comment |
Yes they can, but the selector cannot use$("#something with spaces")it needs to be$("#something\ with\ spaces")
– mplungjan
Nov 11 at 11:38
Well, you are correct: technically they "can", but if they do, they don't follow HTML specification (see link in my original response).
– jonasdev
Nov 11 at 12:23
Yes they can, but the selector cannot use
$("#something with spaces") it needs to be $("#something\ with\ spaces")– mplungjan
Nov 11 at 11:38
Yes they can, but the selector cannot use
$("#something with spaces") it needs to be $("#something\ with\ spaces")– mplungjan
Nov 11 at 11:38
Well, you are correct: technically they "can", but if they do, they don't follow HTML specification (see link in my original response).
– jonasdev
Nov 11 at 12:23
Well, you are correct: technically they "can", but if they do, they don't follow HTML specification (see link in my original response).
– jonasdev
Nov 11 at 12:23
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53248137%2fjquery-change-div-depending-on-options%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
