Jquery selector stops working when I'm trying to use id attribute instead of value-CodePudding

When I use value instead of id for example [value="' this.value '"] everything works fine but in this case, the selector is not working.

Sorry if that's a stupid question but I'm new to jquery and I can't find information related to my case at StackOverflow so I am posting here.

This is my code:

var $select1 = $('#select1'),
  $select2 = $('#select2'),
  $select3 = $('#select3'),
  $select4 = $('#select4'),
  $select5 = $('#select5'),
  $select6 = $('#select6'),
  $select7 = $('#select7'),
  $options = $select2.find('option');
$options2 = $select3.find('option');
$options3 = $select4.find('option');
$options4 = $select5.find('option');
$options5 = $select6.find('option');
$options6 = $select7.find('option');

$select1.on('change', function() {
  $select2.html($options.filter('[id="'   this.id   '"]'));
  $select3.html($options2.filter('[id="'   this.id   '"]'));
  $select4.html($options3.filter('[id="'   this.id   '"]'));
  $select5.html($options4.filter('[id="'   this.id   '"]'));
  $select6.html($options5.filter('[id="'   this.id   '"]'));
  $select7.html($options6.filter('[id="'   this.id   '"]'));
}).trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <label>Select Service: *</label>
  <select  size="3" id="select1" name="select1" required>
    <option value="softwaredevelopment" id="1">Software consulting</option>
    <option value="websites" id="2">Websites</option>
    <option value="qatesting" id="3">QA Testing</option>
  </select>
</div>
<div >
  <select  id="select2" name="select2" required>
    <option value="consulting1-" id="1">Consulting 10</option>
    <option value="consulting20" id="1">Consulting 20</option>
    <option value="consulting30" id="1">Consulting 30</option>
    <option value="1-20pages" id="2">1-20 Pages</option>
    <option value="10-50pages" id="2">10-50 Pages</option>
    <option value="50-250pages" id="2">50-150 Pages</option>
    <option value="150-250pages" id="2">150-250 Pages</option>
    <option value="qa50" id="3">qa 50</option>
  </select>
</div>
<div >
  <select  id="select3" name="select3" required>
    <option value="consulting510" id="1">Consulting 510</option>
    <option value="consulting2230" id="1">Consulting 2230</option>
    <option value="consulting33420" id="1">Consulting 33420</option>
    <option value="nodesignneeded" id="2">No Design Needed</option>
    <option value="simpledesign" id="2">Simple Design</option>
    <option value="moderatelystylizeddesign" id="2">Moderately Stylized Design</option>
    <option value="highenddesign" id="2">High End Design</option>
    <option value="qa53210" id="3">qa 53210</option>
  </select>
</div>
<div >
  <select  id="select4" name="select4" required>
    <option value="consulting510" id="1">Consulting 510</option>
    <option value="consulting2230" id="1">Consulting 2230</option>
    <option value="consulting33420" id="1">Consulting 33420</option>
    <option value="notresponsivedesign" id="2">Not Responsive Design</option>
    <option value="responsivedesign" id="2">Responsive Design</option>
    <option value="qa53210" id="3">qa 53210</option>
  </select>
</div>
<div >
  <select  id="select5" name="select5" required>
    <option value="consulting510" id="1">Consulting 510</option>
    <option value="consulting2230" id="1">Consulting 2230</option>
    <option value="consulting33420" id="1">Consulting 33420</option>
    <option value="nodatabaseintegration" id="2">No Database Integration</option>
    <option value="basicdatabaseintegration" id="2">Basic Database Integration</option>
    <option value="advanceddatabaseintegration" id="2">Advanced Database Integration</option>
    <option value="fulldatabasedevelopment" id="2">Full Database Development</option>
    <option value="qa53210" id="3">qa 53210</option>
  </select>
</div>
<div >
  <select  id="select6" name="select6" required>
    <option value="consulting510" id="1">Consulting 510</option>
    <option value="consulting2230" id="1">Consulting 2230</option>
    <option value="consulting33420" id="1">Consulting 33420</option>
    <option value="noecommercefunctionality" id="2">No Ecommerce Functionality</option>
    <option value="basicecommercefunctionality" id="2">Basic Ecommerce Functionality</option>
    <option value="advancedecommercefunctionality" id="2">Advanced Ecommerce Functionality</option>
    <option value="enterpriseecommercefunctionality" id="2">Enterprise Ecommerce Functionality</option>
    <option value="qa53210" id="3">qa 53210</option>
  </select>
</div>
<div >
  <select  id="select7" name="select7" required>
    <option value="consulting510" id="1">Consulting 510</option>
    <option value="consulting2230" id="1">Consulting 2230</option>
    <option value="consulting33420" id="1">Consulting 33420</option>
    <option value="nocms" id="2">No CMS</option>
    <option value="basiccms" id="2">Basic CMS</option>
    <option value="advancedcms" id="2">Advanced CMS</option>
    <option value="enterprisecms" id="2">Enterprise CMS</option>
    <option value="qa53210" id="3">qa 53210</option>
  </select>
</div>

CodePudding user response：

IDs are supposed to be unique, so you can't have the same id="1" in multiple options. Use a class instead of ID.

In the change event listener, this is the <select>, not the selected option. So this.id is the ID of the dropdown, not an option. Use this.value.

To make this fit together, the classes of the options in the other dropdowns should match the values in select1.

Instead of saving all the options in variables, you can just hide and show the options in each class. This allows you to use the same code for all the dropdowns, by giving them the same class.

var $select1 = $('#select1');

$select1.on('change', function() {
  if (this.value) {
    $(".dependent-select option").hide();
    $(`.dependent-select option.${this.value}`).show();
  } else {
    $(".dependent-select option").show();
  }
}).trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <label>Select Service: *</label>
  <select  size="3" id="select1" name="select1" required>
    <option value="softwaredevelopment">Software consulting</option>
    <option value="websites">Websites</option>
    <option value="qatesting">QA Testing</option>
  </select>
</div>
<div >
  <select  id="select2" name="select2" required>
    <option value="">Select...</option>
    <option value="consulting1-" >Consulting 10</option>
    <option value="consulting20" >Consulting 20</option>
    <option value="consulting30" >Consulting 30</option>
    <option value="1-20pages" >1-20 Pages</option>
    <option value="10-50pages" >10-50 Pages</option>
    <option value="50-250pages" >50-150 Pages</option>
    <option value="150-250pages" >150-250 Pages</option>
    <option value="qa50" >qa 50</option>
  </select>
</div>
<div >
  <select  id="select3" name="select3" required>
    <option value="">Select...</option>
    <option value="consulting510" >Consulting 510</option>
    <option value="consulting2230" >Consulting 2230</option>
    <option value="consulting33420" >Consulting 33420</option>
    <option value="nodesignneeded" >No Design Needed</option>
    <option value="simpledesign" >Simple Design</option>
    <option value="moderatelystylizeddesign" >Moderately Stylized Design</option>
    <option value="highenddesign" >High End Design</option>
    <option value="qa53210" >qa 53210</option>
  </select>
</div>
<div >
  <select  id="select4" name="select4" required>
    <option value="">Select...</option>
    <option value="consulting510" >Consulting 510</option>
    <option value="consulting2230" >Consulting 2230</option>
    <option value="consulting33420" >Consulting 33420</option>
    <option value="notresponsivedesign" >Not Responsive Design</option>
    <option value="responsivedesign" >Responsive Design</option>
    <option value="qa53210" >qa 53210</option>
  </select>
</div>
<div >
  <select  id="select5" name="select5" required>
    <option value="">Select...</option>
    <option value="consulting510" >Consulting 510</option>
    <option value="consulting2230" >Consulting 2230</option>
    <option value="consulting33420" >Consulting 33420</option>
    <option value="nodatabaseintegration" >No Database Integration</option>
    <option value="basicdatabaseintegration" >Basic Database Integration</option>
    <option value="advanceddatabaseintegration" >Advanced Database Integration</option>
    <option value="fulldatabasedevelopment" >Full Database Development</option>
    <option value="qa53210" >qa 53210</option>
  </select>
</div>
<div >
  <select  id="select6" name="select6" required>
    <option value="">Select...</option>
    <option value="consulting510" >Consulting 510</option>
    <option value="consulting2230" >Consulting 2230</option>
    <option value="consulting33420" >Consulting 33420</option>
    <option value="noecommercefunctionality" >No Ecommerce Functionality</option>
    <option value="basicecommercefunctionality" >Basic Ecommerce Functionality</option>
    <option value="advancedecommercefunctionality" >Advanced Ecommerce Functionality</option>
    <option value="enterpriseecommercefunctionality" >Enterprise Ecommerce Functionality</option>
    <option value="qa53210" >qa 53210</option>
  </select>
</div>
<div >
  <select  id="select7" name="select7" required>
    <option value="">Select...</option>
    <option value="consulting510" >Consulting 510</option>
    <option value="consulting2230" >Consulting 2230</option>
    <option value="consulting33420" >Consulting 33420</option>
    <option value="nocms" >No CMS</option>
    <option value="basiccms" >Basic CMS</option>
    <option value="advancedcms" >Advanced CMS</option>
    <option value="enterprisecms" >Enterprise CMS</option>
    <option value="qa53210" >qa 53210</option>
  </select>
</div>