Change select option based on another select value (multiple select) - Jquery

user_3877838 0
Viewed 1469

I have been using four HTML <select> options in this example. The output I want to achieve is when you chose an option in the first <select> box the other <select> fields change the available options accordingly to what you selected. For showing and hiding the <select> options I am using JQUERY.

Goal:

The goal I want to achieve is that when you <select> something from select box 1 the values in select box 2, select box 3 and select box 4 change corresponding the selected value. When you <select> an option in select box 2 the values in select box 3 change corresponding the selected value, and so on ...

The Issue:

The issue I am having is that only the first child <select> box changes the options, the other <select> boxes keep their old value and do not get replaced with the corresponding options.

Current code:

$("[data-child]").change(function() {
  var value;
  var selectedGroup = $(this).find(":selected").val();
  var dataChildId = $("#" + $(this).attr("data-child"));
  var datagrp = $(this).attr("data-child");

  if (datagrp == 'niv1') {
    value = dataChildId.find('option').hide().not('[data-group!="' + selectedGroup + '"]').show().eq(0).val();
  }
  if (datagrp == 'niv2') {
    value = dataChildId.find('option').hide().not('[data-group!="' + selectedGroup + '"]').show().eq(0).val();
  }
  if (datagrp == 'niv3') {
    value = dataChildId.find('option').hide().not('[data-group!="' + selectedGroup + '"]').show().eq(0).val();
  }
  dataChildId.trigger("change");
  dataChildId.val(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row" style="margin-left: auto; margin-right: auto; padding-top: 50px">
  <div class="col-3">
    <span>1. Operating system</span>
    <select data-child="niv1" class="selectdata form-control custom-select">
      <option value="1-1">Android</option>
      <option value="1-2">Linux</option>
      <option value="1-3">Windows</option>
    </select>
  </div>
  <div class="col-3">
    <span>2. System version</span>
    <select id="niv1" data-child="niv2" class="selectdata form-control custom-select">
      <option data-group="1-1" value="1-1-1" disabled>9.0 Pie</option>
      <option data-group="1-2" value="1-2-1" disabled>Ubuntu</option>

      <option data-group="1-3" value="1-3-1">Windows 7</option>
      <option data-group="1-3" value="1-3-2">Windows 8</option>
      <option data-group="1-3" value="1-3-3">Windows 10</option>
    </select>
  </div>
  <div class="col-3">
    <span>3. Edition</span>
    <select id="niv2" data-child="niv3" class="selectdata form-control custom-select">
      <option data-group="1-3-1" value="1-3-1-1">Windows 7 Home</option>
      <option data-group="1-3-1" value="1-3-1-2">Windows 7 Pro</option>

      <option data-group="1-3-2" value="1-3-2-1">Windows 8 Home</option>
      <option data-group="1-3-2" value="1-3-2-2">Windows 8 Pro</option>

      <option data-group="1-3-3" value="1-3-3-1">Windows 10 Home</option>
      <option data-group="1-3-3" value="1-3-3-2">Windows 10 Pro</option>
    </select>
  </div>
  <div class="col-3">
    <span>4. Build</span>
    <select id="niv3" data-child="niv4" class="selectdata form-control custom-select">
        <option data-group="1-3-1-1" value="1-3-1-1-1">Win 7 Home - A</option>
        <option data-group="1-3-1-1" value="1-3-1-1-2">Win 7 Home - B</option>

        <option data-group="1-3-1-2" value="1-3-1-2-1">Win 7 Pro - A</option>
        <option data-group="1-3-1-2" value="1-3-1-2-2">Win 7 Pro - B</option>

        <option data-group="1-3-2-1" value="1-3-2-1-1">Win 8 Home - A</option>
        <option data-group="1-3-2-1" value="1-3-2-1-2">Win 8 Home - B</option>

        <option data-group="1-3-2-2" value="1-3-2-2-1">Win 8 Pro - A</option>
        <option data-group="1-3-2-2" value="1-3-2-2-2">Win 8 Pro - B</option>

        <option data-group="1-3-3-1" value="1-3-3-1-1">Win 10 Home - A</option>
        <option data-group="1-3-3-1" value="1-3-3-1-2">Win 1 Home - B</option>

        <option data-group="1-3-3-2" value="1-3-3-2-1">Win 10 Pro - A</option>
        <option data-group="1-3-3-2" value="1-3-3-2-2">Win 10 Pro - B</option>
    </select>
  </div>
</div>

Solution by @RokoC.Buljan

Change:

dataChildId.trigger("change");
dataChildId.val(value);

To:

dataChildId.val(value);
dataChildId.trigger("change");

Now the code works perfectly, thanks!

Improved JQUERY codeing by @ChrisG

$("[data-child]").change(function() {
  const selectedGroup = $(this).val();
  var $childSelect = $("#" + $(this).attr("data-child"));
  value = $childSelect.find('option').hide()
  .filter(function (i, e) {
    return $(e).val().startsWith(selectedGroup)
  }).show().eq(0).val();
  $childSelect.val(value);
  $childSelect.trigger('change');
});

$("[data-child]").eq(0).trigger('change');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" style="margin-left: auto; margin-right: auto; padding-top: 50px">
<div class="col-3">
    <span>Operating system</span>
    <select data-child="niv1" class="selectdata form-control custom-select">
        <option value="1-1">Android</option>
        <option value="1-2">Linux</option>
        <option value="1-3">Windows</option>
    </select>
</div>
<div class="col-3">
    <span>System version</span>
    <select id="niv1" data-child="niv2" class="selectdata form-control custom-select">
        <option data-group="1-1" value="1-1-1">9.0 Pie</option>
        <option data-group="1-2" value="1-2-1">Ubuntu</option>

        <option data-group="1-3" value="1-3-1">Windows 7</option>
        <option data-group="1-3" value="1-3-2">Windows 8</option>
        <option data-group="1-3" value="1-3-3">Windows 10</option>
    </select>
</div>
<div class="col-3">
    <span>Edition</span>
    <select id="niv2" data-child="niv3" class="selectdata form-control custom-select">
        <option data-group="1-3-1" value="1-3-1-1">Windows 7 Home</option>
        <option data-group="1-3-1" value="1-3-1-2">Windows 7 Pro</option>

        <option data-group="1-3-2" value="1-3-2-1">Windows 8 Home</option>
        <option data-group="1-3-2" value="1-3-2-2">Windows 8 Pro</option>
        
        <option data-group="1-3-3" value="1-3-3-1">Windows 10 Home</option>
        <option data-group="1-3-3" value="1-3-3-2">Windows 10 Pro</option>
    </select>
</div>
<div class="col-3">
    <span>Build</span>
    <select id="niv3" data-child="niv4" class="selectdata form-control custom-select">
        <option data-group="1-3-1-1" value="1-3-1-1-1">Win 7 Home - A</option>
        <option data-group="1-3-1-1" value="1-3-1-1-2">Win 7 Home - B</option>

        <option data-group="1-3-1-2" value="1-3-1-2-1">Win 7 Pro - A</option>
        <option data-group="1-3-1-2" value="1-3-1-2-2">Win 7 Pro - B</option>

        <option data-group="1-3-2-1" value="1-3-2-1-1">Win 8 Home - A</option>
        <option data-group="1-3-2-1" value="1-3-2-1-2">Win 8 Home - B</option>

        <option data-group="1-3-2-2" value="1-3-2-2-1">Win 8 Pro - A</option>
        <option data-group="1-3-2-2" value="1-3-2-2-2">Win 8 Pro - B</option>

        <option data-group="1-3-3-1" value="1-3-3-1-1">Win 10 Home - A</option>
        <option data-group="1-3-3-1" value="1-3-3-1-2">Win 1 Home - B</option>

        <option data-group="1-3-3-2" value="1-3-3-2-1">Win 10 Pro - A</option>
        <option data-group="1-3-3-2" value="1-3-3-2-2">Win 10 Pro - B</option>
    </select>
</div>
</div>

html-select html jquery javascript
0 Answers
Related