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 class="form-group">
<label>Select Service: *</label>
<select class="form-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 class="form-group">
<select class="form-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 class="form-group">
<select class="form-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 class="form-group">
<select class="form-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 class="form-group">
<select class="form-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 class="form-group">
<select class="form-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 class="form-group">
<select class="form-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>>Solution :
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 class="form-group">
<label>Select Service: *</label>
<select class="form-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 class="form-group">
<select class="form-select dependent-select" id="select2" name="select2" required>
<option value="">Select...</option>
<option value="consulting1-" class="softwaredevelopment">Consulting 10</option>
<option value="consulting20" class="softwaredevelopment">Consulting 20</option>
<option value="consulting30" class="softwaredevelopment">Consulting 30</option>
<option value="1-20pages" class="websites">1-20 Pages</option>
<option value="10-50pages" class="websites">10-50 Pages</option>
<option value="50-250pages" class="websites">50-150 Pages</option>
<option value="150-250pages" class="websites">150-250 Pages</option>
<option value="qa50" class="qatesting">qa 50</option>
</select>
</div>
<div class="form-group">
<select class="form-select dependent-select" id="select3" name="select3" required>
<option value="">Select...</option>
<option value="consulting510" class="softwaredevelopment">Consulting 510</option>
<option value="consulting2230" class="softwaredevelopment">Consulting 2230</option>
<option value="consulting33420" class="softwaredevelopment">Consulting 33420</option>
<option value="nodesignneeded" class="websites">No Design Needed</option>
<option value="simpledesign" class="websites">Simple Design</option>
<option value="moderatelystylizeddesign" class="websites">Moderately Stylized Design</option>
<option value="highenddesign" class="websites">High End Design</option>
<option value="qa53210" class="qatesting">qa 53210</option>
</select>
</div>
<div class="form-group">
<select class="form-select dependent-select" id="select4" name="select4" required>
<option value="">Select...</option>
<option value="consulting510" class="softwaredevelopment">Consulting 510</option>
<option value="consulting2230" class="softwaredevelopment">Consulting 2230</option>
<option value="consulting33420" class="softwaredevelopment">Consulting 33420</option>
<option value="notresponsivedesign" class="websites">Not Responsive Design</option>
<option value="responsivedesign" class="websites">Responsive Design</option>
<option value="qa53210" class="qatesting">qa 53210</option>
</select>
</div>
<div class="form-group">
<select class="form-select dependent-select" id="select5" name="select5" required>
<option value="">Select...</option>
<option value="consulting510" class="softwaredevelopment">Consulting 510</option>
<option value="consulting2230" class="softwaredevelopment">Consulting 2230</option>
<option value="consulting33420" class="softwaredevelopment">Consulting 33420</option>
<option value="nodatabaseintegration" class="websites">No Database Integration</option>
<option value="basicdatabaseintegration" class="websites">Basic Database Integration</option>
<option value="advanceddatabaseintegration" class="websites">Advanced Database Integration</option>
<option value="fulldatabasedevelopment" class="websites">Full Database Development</option>
<option value="qa53210" class="qatesting">qa 53210</option>
</select>
</div>
<div class="form-group">
<select class="form-select dependent-select" id="select6" name="select6" required>
<option value="">Select...</option>
<option value="consulting510" class="softwaredevelopment">Consulting 510</option>
<option value="consulting2230" class="softwaredevelopment">Consulting 2230</option>
<option value="consulting33420" class="softwaredevelopment">Consulting 33420</option>
<option value="noecommercefunctionality" class="websites">No Ecommerce Functionality</option>
<option value="basicecommercefunctionality" class="websites">Basic Ecommerce Functionality</option>
<option value="advancedecommercefunctionality" class="websites">Advanced Ecommerce Functionality</option>
<option value="enterpriseecommercefunctionality" class="websites">Enterprise Ecommerce Functionality</option>
<option value="qa53210" class="qatesting">qa 53210</option>
</select>
</div>
<div class="form-group">
<select class="form-select dependent-select" id="select7" name="select7" required>
<option value="">Select...</option>
<option value="consulting510" class="softwaredevelopment">Consulting 510</option>
<option value="consulting2230" class="softwaredevelopment">Consulting 2230</option>
<option value="consulting33420" class="softwaredevelopment">Consulting 33420</option>
<option value="nocms" class="websites">No CMS</option>
<option value="basiccms" class="websites">Basic CMS</option>
<option value="advancedcms" class="websites">Advanced CMS</option>
<option value="enterprisecms" class="websites">Enterprise CMS</option>
<option value="qa53210" class="qatesting">qa 53210</option>
</select>
</div>