Is it possible? If yes, then how? Please, give an example, because I can't find it anywhere. (I found the example of dynamically update options depending on another select field's data but in the same form).
You can add an eventlistener to the change of the select and based on value change any other element.
const select1 = document.querySelector('.select_1');
const option1 = document.querySelector('.select_2 option:first-of-type');
select1.addEventListener('change', function(){
if(this.value === 'b'){
option1.textContent = 'newA';
option1.setAttribute('value','newA');
} else {
option1.textContent = 'A';
option1.setAttribute('value','a');
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select class="select_1">
<option value="a">A</option>
<option value="b">B</option>
</select>
</form>
<form>
<select class="select_2">
<option value="a">A</option>
<option value="b">B</option>
</select>
</form>You can try this using JQuery:
// Hide all options initially
$('#selectChild option').attr('disabled',true);
// When the user changes the Parent select (Animal Category)
$(document).on('change', '#selectParent', function() {
// Assign the value of the selected option to variable
let category = $('#selectParent option:selected').val();
// Run through each Child select (Animal Name) option and filter based on its data-* attribute value
$('#selectChild option').filter(function() {
if ($(this).data('category') != category) {
$(this).attr('disabled',true);
} else {
$(this).attr('disabled',false);
}
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h5>
Animal Category
</h5>
<select id="selectParent">
<option value="">Please Select</option>
<option value="mammal">Mammal</option>
<option value="insect">Insect</option>
</select>
<br>
<hr>
<h5>
Animal Name
</h5>
<select id="selectChild">
<option> Please Select </option>
<option value="dog" data-category="mammal">Dog</option>
<option value="cat" data-category="mammal">Cat</option>
<option value="horse" data-category="mammal">Horse</option>
<option value="spider" data-category="insect">Spider</option>
<option value="ant" data-category="insect">Ant</option>
<option value="roach" data-category="insect">Roach</option>
</select>