Jquery change div depending on options

Question

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>

mplungjan · Answer 1 · 2018-11-11T13:09:31.223

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>

score 0 · Accepted Answer · answered Nov 11 '18 at 11:38

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>

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 '18 at 03: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 '18 at 17:52

score -1 · Answer 3 · edited Nov 11 '18 at 11:32

-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 '18 at 11:32

Zoe

27,060
21
118
148

answered Nov 11 '18 at 11:31

jonasdev

696
5
11

Yes they can, but the selector cannot use `$("#something with spaces")` it needs to be `$("#something\\ with\\ spaces")` – mplungjan Nov 11 '18 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 '18 at 12:23

Jquery change div depending on options

3 Answers3