Question 11205 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

2 Select Boxes – Select Box 1 (A,B,C…) fills Select Box 2, doesn't work properly – Jquery

I would like to have the output in select box 2 in such a way that if I choose something with B in select box 1, everything that begins with B in select box 1 is output. At the moment only one is issued and the others are not

$('#select1').on('change', () => {
  $('#select2 option').hide();
  $('#select2 option[value^="' + $('#select1').val() + '" ]').show();
}).trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="standard" size="1" id="select1">
  <option value="0">A</option>
  <option value="1">B</option>
  <option value="2">C</option>
  <option value="3">D</option>
  <option value="4">E</option>
  <option value="5">F</option>
  <option value="6">G</option>
  <option value="7">H</option>
  <option value="8">I</option>
  <option value="9">J</option>
  <option value="10">K</option>
  <option value="11">L</option>
  <option value="12">M</option>
</select>

<select name="standard" size="1" id="select2">
  <option value="0" style="">Aal in Aspik</option>
  <option value="1" style="display: none;">Bierwurst</option>
  <option value="2" style="display: none;">Berliner (Faschingskrapfen)</option>
  <option value="3" style="display: none;">Auberginenröllchen auf Tomaten-Zimt-Sugo</option>
</select>
Tags:

2

Answers


  1. 0

    Since your selector #select2 option[value^="' + $('#select1').val() + '" ] will only match one options, so the other options that have greater value still not be showed. You could try to use jQuery’s filter

    $('#select1').on('change', () => {
  var value1 =  $('#select1').val();
  var option2 = $('#select2 option');
  $('#select2').val(value1).change();
  option2.hide();
  option2.filter(function() {
    return parseInt($(this).val()) >= parseInt(value1);
  }).show();
}).trigger('change');

    See demo here

    Login or Signup to reply.
  2. 0

    Your issue is here:

    [value^="' + $('#select1').val() + '" ]

    If you debug select val, you’ll see it’s 1 for B as it takes the option value:

    <option value="1">B</option>

    To compare texts, you need to get the text of the current selected option, eg:

    $('#select1 option:selected').text()

    you can then use .filter to compare this with the first letter of each option in the second select:

    $('#select2 option').filter((i,e)=> $(e).text().substr(0,1) == $('#select1 option:selected').text()).show();

    Updated snippet:

    $('#select1').on('change', () => {
  $('#select2 option').hide();
  $('#select2 option').filter((i,e)=> $(e).text().substr(0,1) == $('#select1 option:selected').text()).show();
}).trigger('change');
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="standard" size="1" id="select1">
  <option value="0">A</option>
  <option value="1">B</option>
  <option value="2">C</option>
  <option value="3">D</option>
  <option value="4">E</option>
  <option value="5">F</option>
  <option value="6">G</option>
  <option value="7">H</option>
  <option value="8">I</option>
  <option value="9">J</option>
  <option value="10">K</option>
  <option value="11">L</option>
  <option value="12">M</option>
</select>

<select name="standard" size="1" id="select2">
  <option value="0" style="">Aal in Aspik</option>
  <option value="1" style="display: none;">Bierwurst</option>
  <option value="2" style="display: none;">Berliner (Faschingskrapfen)</option>
  <option value="3" style="display: none;">Auberginenröllchen auf Tomaten-Zimt-Sugo</option>
</select>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search