Develop Reference

Disabling select2 options based on selected value

I am trying to do something very similar to this fiddle, but rather than disable the other selections in the same group as which is selected, I want to disable all the options which are NOT in the same group as the one selected...therefore forcing the user to select another option from the same group.
However, even if I simply copy the code from the fiddle, it gives me an error:
https://jsfiddle.net/bindrid/hpkqxto6/
<select multiple style="width: 300px">
<option groupid="a" value="A_AK">Alaska</option>
<option groupId="b" value="B_HI">Hawaii</option>
<option groupid="c" value="C_CA">California</option>
<option groupid="a" value="D_NV">Nevada</option>
<option groupid="b" value="A_OR">Oregon</option>
<option groupid="c" value="B_WA">Washington</option>
<option groupid="a" value="C_AZ">Arizona</option>
<option groupid="b" value="D_CO">Colorado</option>
<option groupid="c" value="A_ID">Idaho</option>
<option groupid="a" value="B_MT">Montana</option>
<option groupid="b" value="C_NE">Nebraska</option>
<option groupid="c" value="D_NM">New Mexico</option>
<option groupid="a" value="A_ND">North Dakota</option>
<option groupid="b" value="B_UT">Utah</option>
<option groupid="c" value="C_WY">Wyoming</option>
</select>
$(function() {
$('select').select2({
allowClear: true,
placeholder: "Pick a State"
});
//Select2 Event handler for selecting an item
$('select').on("select2:selecting", function(evt, f, g) {
disableSel2Group(evt, this, true);
});
// Select2 Event handler for unselecting an item
$('select').on("select2:unselecting", function(evt) {
disableSel2Group(evt, this, false);
});
});
// At some point during the select2 instantation it created the
// data object it needs with the source select option.
// This function, called by the events above to set the current status for the
// group for which the selected option belongs.
function disableSel2Group(evt, target, disabled) {
// Found a note in the Select2 formums on how to get the item to be selected
var selId = evt.params.args.data.id;
var group = $("option[value='" + selId + "']").attr("groupid");
var aaList = $("option", target);
$.each(aaList, function(idx, item) {
var data = $(item).data("data");
var itemGroupId = $("option[value='" + data.id + "']").attr("groupid");
if (itemGroupId == group && data.id != selId) {
data.disabled = disabled;
}
})
}
The idea being that when an option is selected in a select2 dropdown, it then disables other options. However, even if I simply recreate this code, I get an error (cannot read property 'id' of undefined) which triggers on the line:
var group = $("option[value='" + selId + "']").attr("groupid");
Can anyone help fix the error, and then help me with my main intention of disabling all other groups? Thanks.

You can use evt.params.args.data.element this will give you option tag html then using this you can get the groupid value and compare it with all options attr if not same disabled that option.
Now , instead of unselecting use unselect because here you need to enable all options when select-box doesn't have any value selected . So , inside your function get select2('data').length and if length is 0 then only enabled all options.
Demo Code :
$(function() {
$('select').select2({
allowClear: true,
placeholder: "Pick a State"
});
$('select').on("select2:selecting", function(evt, f, g) {
disableSel2Group(evt, this, true);
});
$('select').on("select2:unselect", function(evt) {
disableSel2Group(undefined, undefined, false);
});
})
function disableSel2Group(evt, target, disabled) {
//check if disabled true
if (disabled) {
//get option
var selId = evt.params.args.data.element;
var group = $(selId).attr('groupid') //groupid
var aaList = $("option", target);
$.each(aaList, function(idx, item) {
var other_groups = $(item).attr("groupid"); //get option groupid
var data = $(item).data("select2-id"); //get option selct2id
//if not same
if (group != other_groups) {
$("select option[data-select2-id =" + data + "]").prop("disabled", true); //disable that option
}
})
} else {
var count = $('select').select2('data').length //checcking slected data count
console.log(count)
//if 0
if (count == 0) {
$("select option").prop("disabled", false); //enable all options
}
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/css/select2.min.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js"></script>
<select multiple style="width: 300px">
<option groupid="a" value="A_AK">Alaska</option>
<option groupid="b" value="B_HI">Hawaii</option>
<option groupid="c" value="C_CA">California</option>
<option groupid="a" value="D_NV">Nevada</option>
<option groupid="b" value="A_OR">Oregon</option>
<option groupid="c" value="B_WA">Washington</option>
<option groupid="a" value="C_AZ">Arizona</option>
<option groupid="b" value="D_CO">Colorado</option>
<option groupid="c" value="A_ID">Idaho</option>
<option groupid="a" value="B_MT">Montana</option>
<option groupid="b" value="C_NE">Nebraska</option>
<option groupid="c" value="D_NM">New Mexico</option>
<option groupid="a" value="A_ND">North Dakota</option>
<option groupid="b" value="B_UT">Utah</option>
<option groupid="c" value="C_WY">Wyoming</option>
</select>

Filter <SELECT> options based on value

I have 2 input selects
Country and Cars
This is the structure: [https://jsfiddle.net/CornerStone20/r1eanhwv/6/][1]
JSFIDDLE: [1]: https://jsfiddle.net/CornerStone20/r1eanhwv/6/
When I select Country, How do I only show the selected country's cars?
I have tried:
$(function() {
$('#Country_Select').on('change', function() {
var val = this.value;
$('#Cars_Select option').hide().filter(function() {
return this.value.indexOf( val + '_' ) === 0;
})
.show();
})
.change();
});

You can use each loop to iterate through options and check if the value of car select- box is same as country select-box depending upon this show() or hide() options .
Demo Code :
$(function() {
$('#Country_Select').on('change', function() {
var val = this.value;
$('#Cars_Select option').each(function() {
//checking value of opton in cars selct is same
if ($(this).val() == val) {
$(this).show(); //show it
} else {
$(this).hide(); //hide other
}
})
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
// Country select
<select id="Country_Select" class="form-control">
<option selected="true" disabled="false">Choose Country</option>
<option value="0001">France</option>
<option value="8ebd9ec1-b121-44e9-a530-42f227359913">Germany</option>
<option value="4dda2683-83c6-48c8-af9b-0a96991b7c8b">New Zealand</option>
</select>
// Cars
<select id="Cars_Select" class="form-control">
<option selected="true" disabled="false">Choose Cars</option>
<option value="0001">Renauld</option>
<option value="0001">Mini</option>
<option value="0001">Paris</option>
<option value="8ebd9ec1-b121-44e9-a530-42f227359913">BMW</option>
<option value="8ebd9ec1-b121-44e9-a530-42f227359913">Audi</option>
<option value="8ebd9ec1-b121-44e9-a530-42f227359913">Mercedes</option>
<option value="8ebd9ec1-b121-44e9-a530-42f227359913">Benz</option>
<option value="4dda2683-83c6-48c8-af9b-0a96991b7c8b">Kiwi Auto</option>
</select>

Even though the question has been answered, I am writing a better approach here:
$('#Country_Select').on('change', function(e) {
let cars = $('#Cars_Select').children();
cars.hide();
let country = $(this).val();
cars.filter('[value=' + country + ']').add(cars.eq(0)).show();
});

Change other select box options on one select box change- jQuery

I am implementing security questions for my project during login.
For Example, I have 4 questions and 4 <select> boxes to select each question
What is your father's middle name?
What is the first name of your first manager?
In what city was your father born?
What is the name of your pet?
Initially all the <select> boxes are populated all 4 questions
Now if the user selects 1st question from 1st <select> box, this question should be omitted/hidden from other <select> boxes i.e the remaining questions (other than 1st) should be available for 2nd <select> box
Also if I go back to my 1st select box and change the question, the <option> changes should be reflected in other text <select> box
Now I obviously have more than 4 questions in my project to make sure that user is not left without any options for the last <select>.
This is what I have tried so far. But it creates undesirable results

You have to consider all select boxes when checking for selected values, I've added one more loop using .each as follows:
var questions =
[
{
"text" : "What is your father's middle name?",
"value" : "1"
},
{
"text" : "What is the first name of your first manager?",
"value" : "2"
},
{
"text" : "In what city was your father born?",
"value" : "3"
},
{
"text" : "What is the name of your pet?",
"value" : "4"
}
];
$(document).ready(function(){
$('select').each(function(){
var selectbox = $(this).empty();
for(var i = 0, l = questions.length; i < l; i++){
var question = questions[i];
selectbox.append($('<option>', {
value: question.value,
text : question.text
}));
}
});
$('select').change(function(){
var selectid = this.id;
var value = $(this).val();
$('select').each(function(){
var seleid = $(this).attr('id');
$("#"+seleid+" > option").each(function(){
if(seleid !== selectid)
{
sel = $(this);
$("#"+seleid+" option[value="+this.value+"]").show();
$('select').each(function(){
sel.value === value
$("#"+seleid+" option[value="+this.value+"]").hide();
});
}
});
});
})
});
See demo here: http://jsfiddle.net/0vu7snhx/

Try This Hope it will work.
'$("#select1").change(function() {
if ($(this).data('options') == undefined) {
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>'
<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Bird</option>
<option value="4">Car</option>
</select>
<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="4">BWM<option>
</select>

<select id='one'>
<option value='1'>1</option>
<option value='2'>2</option>
</select>
<select id='two'>
</select>
jQuery:
$(document).ready(function(){
$('#one').change(function(){
var op= "<option value='1'>1</option><option value='2'>2</option>";
$('#two').html(op);
});
});

How would I validate my Scrolling List with my current code?

So I am trying to create a function that will validate if an option is selected in my Scrolling List. If nothing is selected, and alert will go off, if one is selected, then it passes validation. This is the code I am using:
<select id="topList" name="toppings" size="8" multiple>
<option value="opCream">Whipped Cream</option>
<option value="opFudge">Hot Fudge</option>
<option value="opMarsh">Marshmallow</option>
<option value="opCherry">Cherries</option>
<option value="opChocSprinkles">Chocolate Sprinkles</option>
<option value="opRainSprinkles">Rainbow Sprinkles</option>
<option value="opCheese">Cheesecake</option>
<option value="opOreo">Oreo Crumbles</option>
</select>
function checkScrollList() {
var ddl = document.getElementById("topList");
var selectedValue = ddl.options[ddl.selectedIndex].value;
if (selectedValue == false)
{
alert("Please select a sundae topping.");
}
}
Thanks for the suggestions!

You could use the selectedIndex property of the select object, like this:
function checkScrollList() {
var ddl = document.getElementById("topList");
if (ddl.selectedIndex === -1) {
alert("Please select a sundae topping.");
}
}
The selectedIndex property will give the zero-based index of the first selected option, so it is not useful for actually retrieving all the selected options. But it is guaranteed to be -1 when no options are selected.

option is still visible in select after remove()

Hi all I have two select fields, on select field first if user select option value one or two then in select field of second all options are visible but if it select option two in first then option two want to remove from select id second. Following is my code:
<script type="text/javascript">
var index3,str;
</script>
<select id="first" onchange="chk();">
<option value = "one">one</option>
<option value = "two">two</option>
<option value = "three">three</option>
</select>
<select id="second">
<option value = "one">one</option>
<option value = "two">two</option>
<option value = "three">three</option>
</select>
<script type="text/javascript">
function chk()
{
index3 = document.getElementById("first");
str= index3.options[index3.selectedIndex].value;
alert("str:"+str);
if (str=="two")
{
$("#second option[value='two']").remove();
}
else
{
if ( $("#second option[value='two']").length == 0 )
{
$("#second").append('<option value="two">two</option>');
}
}
}
</script>
In fiddle it works fine here, But on mobile problem is: If I select option two from select id second, and then select option value two in first select id, then also option two is visible in second select id, if I click on second select id then only it removes. But in jsFiddle it works perfect. Any suggestion will be appreciated, Thanks in advance.

Here i have done complete bin for above issue. please go through demo link.
Demo http://codebins.com/bin/4ldqp7p
HTML
<select id="first">
<option value = "one">
one
</option>
<option value = "two">
two
</option>
<option value = "three">
three
</option>
</select>
<select id="second">
<option value = "one">
one
</option>
<option value = "two">
two
</option>
<option value = "three">
three
</option>
</select>
jQuery
$(function() {
$("#first").change(function() {
var optVal = $(this).val().trim();
if (optVal == "two") {
$("#second").find("option[value=" + optVal + "]").remove();
} else {
if ($("#second").find("option[value=two]").length <= 0) {
$("<option value=\"two\">two</option>").insertAfter($("#second").find("option[value='one']"));
}
}
});
});
Demo http://codebins.com/bin/4ldqp7p

check this Edit
$('#first').change(function() {
$("#second option[value='" + $(this).val() + "']").remove();
});

Your code looks a bit odd overall. If your intention is to remove the item from 'second' if it is selected in 'first', try this update: http://jsfiddle.net/NWbXt/58/
$(function() {
var first = $('#first'),
second = $('#second'),
removed;
first.change(function() {
var selected = first.val();
second.append(removed); //.. add back old option
removed = second.find('option[value="' + first.val() + '"]').remove();
}).trigger('change');
});​