2

I'm trying to populate form based on two or more dynamic selection, this looks like similar to this: dynamic selection

And my code for this looks like this:

(function() {
  'use strict';
  $('#maker').change(function() {
    $('.filterModel').hide();
    $('#' + $(this).val()).show();
  });
  $('#model').change(function() {
    $('.filterForm').hide();
    $('#' + $(this).val()).show();
  });
}());
.filterModel {
  display: none;
}
.filterForm {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="maker" size="6">
  <option value="">Choose model</option>
  <option value="audi">Audi</option>
  <option value="bmw">BMW</option>
  <option value="mb">MB</option>
</select>

<div id="audi" class="filterModel">
  <select id="model" size="6">
    <option value="">Choose Model</option>
    <option value="a1">A1</option>
    <option value="a3">A3</option>
    <option value="a4">A4</option>
    <option value="a6">A6</option>
    <option value="a7">A7</option>
  </select>
</div>

<div id="bmw" class="filterModel">
  <select id="model" size="6">
    <option value="">Choose Model</option>
    <option value="118">118</option>
    <option value="320">320</option>
    <option value="540">540</option>
    <option value="750">750</option>
    <option value="x6">X6</option>
  </select>
</div>

<div id="mb" class="filterModel">
  <select id="model" size="6">
    <option value="">Choose Model</option>
    <option value="aclass">A class</option>
    <option value="bclass">B class</option>
    <option value="eclass">E class</option>
    <option value="mlclass">ML class</option>
    <option value="slclass">SL class</option>
  </select>
</div>

<div class="filterForm" id="a1">
  <p>Audi A1 selected</p>
</div>
<div class="filterForm" id="a3">
  <p>Audi A3 selected</p>
</div>
<div class="filterForm" id="a4">
  <p>Audi A4 selected</p>
</div>
<div class="filterForm" id="a6">
  <p>Audi A6 selected</p>
</div>
<div class="filterForm" id="a7">
  <p>Audi A7 selected</p>
</div>
<div class="filterForm" id="118">
  <p>BMW 118 selected</p>
</div>
<div class="filterForm" id="320">
  <p>BMW 320 selected</p>
</div>
<div class="filterForm" id="540">
  <p>BMW 540 selected</p>
</div>
<div class="filterForm" id="750">
  <p>BMW 750 selected</p>
</div>
<div class="filterForm" id="x6">
  <p>BMW X6 selected</p>
</div>
<div class="filterForm" id="aclass">
  <p>MB A class selected</p>
</div>
<div class="filterForm" id="bclass">
  <p>MB B class selected</p>
</div>
<div class="filterForm" id="eclass">
  <p>MB E class selected</p>
</div>
<div class="filterForm" id="mlclass">
  <p>MB ML class selected</p>
</div>
<div class="filterForm" id="slclass">
  <p>MB SL class selected</p>
</div>

Now, when I select second option in makers and try to select model, nothing happens, can't get my head around this. Maybe there is better solution to do such task? Thanks for your help.

Vytautas Andras
  • 23
  • 4

3 Answers3

1

duplicate ids model.

change it to a class.

working snippet below.

(function() {
  'use strict';
  $('#maker').change(function() {
    $('.filterModel').hide();
    $('#' + $(this).val()).show();
  });
  $('.model').change(function() {
    $('.filterForm').hide();
    $('#' + $(this).val()).show();
  });
}());
.filterModel {
  display: none;
}
.filterForm {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="maker" size="6">
  <option value="">Choose model</option>
  <option value="audi">Audi</option>
  <option value="bmw">BMW</option>
  <option value="mb">MB</option>
</select>

<div id="audi" class="filterModel">
  <select class="model" size="6">
    <option value="">Choose Model</option>
    <option value="a1">A1</option>
    <option value="a3">A3</option>
    <option value="a4">A4</option>
    <option value="a6">A6</option>
    <option value="a7">A7</option>
  </select>
</div>

<div id="bmw" class="filterModel">
  <select class="model" size="6">
    <option value="">Choose Model</option>
    <option value="118">118</option>
    <option value="320">320</option>
    <option value="540">540</option>
    <option value="750">750</option>
    <option value="x6">X6</option>
  </select>
</div>

<div id="mb" class="filterModel">
  <select class="model" size="6">
    <option value="">Choose Model</option>
    <option value="aclass">A class</option>
    <option value="bclass">B class</option>
    <option value="eclass">E class</option>
    <option value="mlclass">ML class</option>
    <option value="slclass">SL class</option>
  </select>
</div>

<div class="filterForm" id="a1">
  <p>Audi A1 selected</p>
</div>
<div class="filterForm" id="a3">
  <p>Audi A3 selected</p>
</div>
<div class="filterForm" id="a4">
  <p>Audi A4 selected</p>
</div>
<div class="filterForm" id="a6">
  <p>Audi A6 selected</p>
</div>
<div class="filterForm" id="a7">
  <p>Audi A7 selected</p>
</div>
<div class="filterForm" id="118">
  <p>BMW 118 selected</p>
</div>
<div class="filterForm" id="320">
  <p>BMW 320 selected</p>
</div>
<div class="filterForm" id="540">
  <p>BMW 540 selected</p>
</div>
<div class="filterForm" id="750">
  <p>BMW 750 selected</p>
</div>
<div class="filterForm" id="x6">
  <p>BMW X6 selected</p>
</div>
<div class="filterForm" id="aclass">
  <p>MB A class selected</p>
</div>
<div class="filterForm" id="bclass">
  <p>MB B class selected</p>
</div>
<div class="filterForm" id="eclass">
  <p>MB E class selected</p>
</div>
<div class="filterForm" id="mlclass">
  <p>MB ML class selected</p>
</div>
<div class="filterForm" id="slclass">
  <p>MB SL class selected</p>
</div>
BenG
  • 14,826
  • 5
  • 45
  • 60
0

It will actually work with the Audi model, and that's because it's the first select element. When selecting elements by 'id' only the first will ever get selected with the same id since they are meant to be unique. For this I suggest putting a class="model" on all selects and targeting them with '.model' rather than '#model'

GMchris
  • 5,439
  • 4
  • 22
  • 40
0

Do not use id as identifier for select, replace id='model' to class='model' and your code would work as you expects.

(function() {
  'use strict';
  $('#maker').change(function() {
    $('.filterModel').hide();
    $('#' + $(this).val()).show();
  });
  $('.model').change(function() {
    $('.filterForm').each(function(){$(this).hide()});
    $('#' + $(this).val()).eq(0).show();
  });
}());
.filterModel {
  display: none;
}
.filterForm {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="maker" size="6">
  <option value="">Choose model</option>
  <option value="audi">Audi</option>
  <option value="bmw">BMW</option>
  <option value="mb">MB</option>
</select>

<div id="audi" class="filterModel">
  <select class="model" size="6">
    <option value="">Choose Model</option>
    <option value="a1">A1</option>
    <option value="a3">A3</option>
    <option value="a4">A4</option>
    <option value="a6">A6</option>
    <option value="a7">A7</option>
  </select>
</div>

<div id="bmw" class="filterModel">
  <select class="model" size="6">
    <option value="">Choose Model</option>
    <option value="118">118</option>
    <option value="320">320</option>
    <option value="540">540</option>
    <option value="750">750</option>
    <option value="x6">X6</option>
  </select>
</div>

<div id="mb" class="filterModel">
  <select class="model" size="6">
    <option value="">Choose Model</option>
    <option value="aclass">A class</option>
    <option value="bclass">B class</option>
    <option value="eclass">E class</option>
    <option value="mlclass">ML class</option>
    <option value="slclass">SL class</option>
  </select>
</div>

<div class="filterForm" id="a1">
  <p>Audi A1 selected</p>
</div>
<div class="filterForm" id="a3">
  <p>Audi A3 selected</p>
</div>
<div class="filterForm" id="a4">
  <p>Audi A4 selected</p>
</div>
<div class="filterForm" id="a6">
  <p>Audi A6 selected</p>
</div>
<div class="filterForm" id="a7">
  <p>Audi A7 selected</p>
</div>
<div class="filterForm" id="118">
  <p>BMW 118 selected</p>
</div>
<div class="filterForm" id="320">
  <p>BMW 320 selected</p>
</div>
<div class="filterForm" id="540">
  <p>BMW 540 selected</p>
</div>
<div class="filterForm" id="750">
  <p>BMW 750 selected</p>
</div>
<div class="filterForm" id="x6">
  <p>BMW X6 selected</p>
</div>
<div class="filterForm" id="aclass">
  <p>MB A class selected</p>
</div>
<div class="filterForm" id="bclass">
  <p>MB B class selected</p>
</div>
<div class="filterForm" id="eclass">
  <p>MB E class selected</p>
</div>
<div class="filterForm" id="mlclass">
  <p>MB ML class selected</p>
</div>
<div class="filterForm" id="slclass">
  <p>MB SL class selected</p>
</div>

Also consider reading that SO question: Can multiple different HTML elements have the same ID if they're different elements?, to investigate topic of "using multiple ids for elements"

Community
  • 1
  • 1
Andriy Ivaneyko
  • 20,639
  • 6
  • 60
  • 82