Hi I have this code But I don't Know why not working is gives me a display but if I change the first drop-down list don't change the drop-down to the second list.
I"m using this HTML in-app script.
This is my code I using HTML and jQuery:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-3.5.1.min.js">
$(document).ready(function(){
var $cat = $('select[name=category]'),
$items = $('select[name=items]');
$cat.change(function(){
var $this = $(this).find(':selected'),
rel = $this.attr('rel'),
$set = $items.find('option.' + rel);
if ($set.size() < 0) {
$items.hide();
return;
}
$items.show().find('option').hide();
$set.show().first().prop('selected', true);
});
});
</script>
</head>
<body>
<h1>Cascading Dropdown Example</h1>
<select name="category">
<option value="0">None</option>
<option value="1" rel="accessories">Cellphones</option>
<option value="2" rel="sports">Sports</option>
<option value="3" rel="cars">Cars</option>
</select>
<select name="items" class="cascade">
<option value="3" class="accessories">Smartphone</option>
<option value="8" class="accessories">Charger</option>
<option value="1" class="sports">Basketball</option>
<option value="4" class="sports">Volleyball</option>
<option value="6" class="cars">Corvette</option>
<option value="2" class="cars">Monte Carloe</option>
</select>
</body>
</html>
I get that code from this source: https://jsfiddle.net/userdude/bY5LF/
This works as requested, I've commented the change in the code so it should be self explainatory. I've hidden all the options and then shown the ones that match the selection on the first drop down.
DEMO
$(document).ready(function(){
var $cat = $('select[name=category]'),
$items = $('select[name=items]');
$cat.change(function(){
var $this = $(this).find(':selected'),
rel = $this.attr('rel');
// Hide all
$items.find("option").hide();
// Find all matching accessories
// Show all the correct accesories
// Select the first accesory
$set = $items.find('option.' + rel);
$set.show().first().prop('selected', true);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Cascading Dropdown Example</h1>
<select name="category">
<option value="0">None</option>
<option value="1" rel="accessories">Cellphones</option>
<option value="2" rel="sports">Sports</option>
<option value="3" rel="cars">Cars</option>
</select>
<select name="items" class="cascade">
<option value="3" class="accessories">Smartphone</option>
<option value="8" class="accessories">Charger</option>
<option value="1" class="sports">Basketball</option>
<option value="4" class="sports">Volleyball</option>
<option value="6" class="cars">Corvette</option>
<option value="2" class="cars">Monte Carloe</option>
</select>