Reputation: 1951
I have a multi select html field which includes categories and the elements relating to those categories
I want a person to be able to select individual courses or if they select a category (value prefixed with cat_) then it should mark the following courses as selected until it finds the next category
I have tried a few things but with no success
$(document).ready(function() {
$('#courses').change(function() {
$(this).nextUntil('option[name^="cat_"]').each().prop("selected", "selected");
$(this).nextUntil('option[name^="cat_"]').prop("selected", "selected");
$(this).closest("option").nextAll().each(function() {
$this.prop("selected", "selected");
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="courses[]" id="courses" multiple="true">
<option value="cat_1">data / </option>
<option value="1">data / Guitar </option>
<option value="2">data / keyboard </option>
<option value="cat_2">mandatory / </option>
<option value="cat_3">fb / </option>
<option value="3">fb / Node js </option>
<option value="4">fb / PHP programming </option>
<option value="5">fb / C# </option>
</select>
Upvotes: 3
Views: 98
Reputation: 122155
You can check if selected option startsWith
cat_ keyword and if it does you can set selected
prop to true of all nextUntil('option[value^="cat_"]')
options.
function select(element, callback) {
element.find('option').on('click', function(event) {
const selected = $(this);
if (selected.val().startsWith('cat_')) {
selected
.nextUntil('option[value^="cat_"]')
.prop('selected', true)
}
callback(element.val())
})
}
select($('#courses'), value => {
console.log(value)
})
select {
height: 250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="courses[]" id="courses" multiple="true">
<option value="cat_1">data / </option>
<option value="1">data / Guitar </option>
<option value="2">data / keyboard </option>
<option value="cat_2">mandatory / </option>
<option value="cat_3">fb / </option>
<option value="2">fb / Node js </option>
<option value="3">fb / PHP programming </option>
<option value="4">fb / C# </option>
</select>
Upvotes: 1
Reputation: 3578
You can recursively move through the siblings, checking to see if they are a new category or part of the current one. Example below;
**Note: ** this works with multiple selections. You'll also need to reverse this logic to unselect.
let select = document.getElementsByClassName('form-control')[0];
function checkSibling(sibling){
if(sibling && !sibling.value.includes('cat')) {
sibling.selected = true;
checkSibling(sibling.nextElementSibling);
}
}
select.addEventListener('click', function(event){
checkSibling(event.target.nextElementSibling);
});
<select class="form-control" name="courses[]" multiple
id="courses" multiple="true" >
<option value="cat_1">data / </option>
<option value="1">data / Guitar </option>
<option value="2">data / keyboard </option>
<option value="cat_2">mandatory / </option>
<option value="cat_3">fb / </option>
<option value="2">fb / Node js </option>
<option value="3">fb / PHP programming </option>
<option value="4">fb / C# </option>
</select>
Upvotes: 0
Reputation: 2310
You can try like this (must appreciate)--
$(document).ready(function() {
$('[value^="cat_"]').click(function(){
$(this).nextUntil('[value^="cat_"]').prop("selected", "selected");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" name="courses[]" id="courses" multiple="true">
<option value="cat_1">data / </option>
<option value="1">data / Guitar </option>
<option value="2">data / keyboard </option>
<option value="cat_2">mandatory / </option>
<option value="cat_3">fb / </option>
<option value="3">fb / Node js </option>
<option value="4">fb / PHP programming </option>
<option value="5">fb / C# </option>
</select>
Upvotes: 0