jquery hide and show select list option .val()

Question

I've run into a bit of problem yet again and I need your insights. I'm using multiple SELECT menus for a webpage that I'm building that have to be auto-sorted depending on what the user has chosen on the previous SELECT input. I'm currently using a hide/show method that fits my needs exactly but I can't figure out how to make the .val() show an exact number. For example if you select Cat 1 you will see Type 1, Type 10, Type 11 like having a wildcard etc. Is there a way for the .val() to be absolute so it will just show Type 1 only on the second SELECT?

Code snippet follows.

Thank you in advance, Xenos K.

 $("#TypeSelect").children('option:gt(0)').hide();
 $("#CategorySelect").change(function() {
   $("#TypeSelect").children('option').hide();
   $("#TypeSelect").children("option[data-type^=" + $(this).val() + "]").show()
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="CategorySelect" name="CategorySelect" style="width:100%;">
  <option value="-" title="-" data-category="-">-</option>
  <option value="1" title="cat 1" data-category="1">cat 1</option>
  <option value="2" title="cat 2" data-category="2">cat 2</option>
</select>
<select class="form-control" id="TypeSelect" name="TypeSelect" style="width:100%;">
  <option value="-" title="-" data-type="-">-</option>
  <option value="type 1" title="type 1" data-type="1">type 1</option>
  <option value="type 2" title="type 2" data-type="2">type 2</option>
  <option value="type 3" title="type 3" data-type="3">type 3</option>
  <option value="type 4" title="type 4" data-type="4">type 4</option>
  <option value="type 5" title="type 5" data-type="5">type 5</option>
  <option value="type 6" title="type 6" data-type="6">type 6</option>
  <option value="type 7" title="type 7" data-type="7">type 7</option>
  <option value="type 8" title="type 8" data-type="8">type 8</option>
  <option value="type 9" title="type 9" data-type="9">type 9</option>
  <option value="type 10" title="type 10" data-type="10">type 10</option>
  <option value="type 11" title="type 11" data-type="11">type 11</option>
  <option value="type 12" title="type 12" data-type="12">type 12</option>
  <option value="type 13" title="type 13" data-type="13">type 13</option>
  <option value="type 14" title="type 14" data-type="14">type 14</option>
  <option value="type 15" title="type 15" data-type="15">type 15</option>
</select>

May be you should think about doing it using Mysql. It would be quiet easy to implement and maintain — Ayan, Aug 03 '16 at 04:39
By the way see this (hope this is what you were looking for) http://stackoverflow.com/a/10571044/3697102 — Ayan, Aug 03 '16 at 04:41

score 0 · Answer 1 · answered Aug 03 '16 at 04:37

Oh lord after posting this I saw that I was actually using a wildcard...Shame on me.

Changed

$("#TypeSelect").children("option[data-type^=" + $(this).val() + "]").show()

To this

$("#TypeSelect").children("option[data-type=" + $(this).val() + "]").show()

Just fixed my day. I'm leaving it here in case anybody else wants it by the way.

Best regards, Xenos K.

 $("#TypeSelect").children('option:gt(0)').hide();
 $("#CategorySelect").change(function() {
   $("#TypeSelect").children('option').hide();
   $("#TypeSelect").children("option[data-type=" + $(this).val() + "]").show()
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" id="CategorySelect" name="CategorySelect" style="width:100%;">
  <option value="-" title="-" data-category="-">-</option>
  <option value="1" title="cat 1" data-category="1">cat 1</option>
  <option value="2" title="cat 2" data-category="2">cat 2</option>
</select>
<select class="form-control" id="TypeSelect" name="TypeSelect" style="width:100%;">
  <option value="-" title="-" data-type="-">-</option>
  <option value="type 1" title="type 1" data-type="1">type 1</option>
  <option value="type 2" title="type 2" data-type="2">type 2</option>
  <option value="type 3" title="type 3" data-type="3">type 3</option>
  <option value="type 4" title="type 4" data-type="4">type 4</option>
  <option value="type 5" title="type 5" data-type="5">type 5</option>
  <option value="type 6" title="type 6" data-type="6">type 6</option>
  <option value="type 7" title="type 7" data-type="7">type 7</option>
  <option value="type 8" title="type 8" data-type="8">type 8</option>
  <option value="type 9" title="type 9" data-type="9">type 9</option>
  <option value="type 10" title="type 10" data-type="10">type 10</option>
  <option value="type 11" title="type 11" data-type="11">type 11</option>
  <option value="type 12" title="type 12" data-type="12">type 12</option>
  <option value="type 13" title="type 13" data-type="13">type 13</option>
  <option value="type 14" title="type 14" data-type="14">type 14</option>
  <option value="type 15" title="type 15" data-type="15">type 15</option>
</select>

jquery hide and show select list option .val()

1 Answers1