We Keep Coding

Select2 Dropdown Multiple select and unselect

I have a select2 dropdown with 4 options code is:
<select id="ddlInqOn" class="InqSelect2 form-control">
<option value="1">--All--</option>
<option value="2">Today Date</option>
<option value="3">Past Date</option>
<option value="4">Feature Date</option>
</select>
select2 called by this javascript:
$('.InqSelect2').select2({
dropdownAutoWidth: 'true',
multiple: true
});
I want to achieve like when I click all option then remove other options and if other option is selected then remove all option from selection.
I have tried this code:
$('body').on('change', '#ddlInqOn', function() {
debugger;
//
});
but the change event is not triggred so any other possibility to track change event of select2 dropdown?

Select2 uses the jQuery event system. So you can attach to the select2 events using the JQuery on method.
Then you can set the value of the select element and trigger the change event to update the select box.
You can do what you have asked in following way.
$('.InqSelect2').on('select2:select', function (e) {
if (e.params.data.id == 1){
$(this).val(1).trigger('change');
}else{
values = $(this).val();
var index = values.indexOf('1');
if (index > -1) {
values.splice(index, 1);
$(this).val(values).trigger('change');
}
}
});
Note that I have used '1' as the value of --All-- option. Feel free to ask me anything if it's not clear to you.
https://jsfiddle.net/c6yrLoow/
Hope it helps :)

Answer given by #Nimeksha works perfectly in jsfiddle given by # Nimeshka but in my code i cant get trigger event of change in dropdown and after searching i found solution from here. the code is here :
$(document).on('change', '.InqSelect2', function () {
debugger;
if (e.params.data.id == 1) {
$(this).val(1).trigger('change');
} else {
values = $(this).val();
var index = values.indexOf('1');
if (index > -1) {
values.splice(index, 1);
$(this).val(values).trigger('change');
}
}
});
i have also tried :
$('body').on('change', '.InqSelect2', function () {
debugger;
if (e.params.data.id == 1) {
$(this).val(1).trigger('change');
} else {
values = $(this).val();
var index = values.indexOf('1');
if (index > -1) {
values.splice(index, 1);
$(this).val(values).trigger('change');
}
}
});
but it doesn't work. also by id #ddlInqOn does not work.
why above code worked with $(document).on('change', '.InqSelect2', function () {}); worked i dont know but it works for me.
thanks again #Nimeshka

Select option won't fire jquery event

I'm having some problems with what should be a simple jQuery show/hide based on a select's value. The select is hidden by default based on other selects, which might be why it's not working?
Unfortunately I can't change the source code in any manner, I can only add a function like this.
$(document).ready(function() {
$('#question-select-1271443').change(function() {
var selection = $(this).val();
if (selection == 'CIIC') {
$('#question-select-1082380').show();
} else {
$('#question-select-1082380').hide();
}
});
});

function val() extract the value of the attribute value of the option selected. Maybe you are trying to extract the content of the option. Example:
<select id="sas">
<option value="hi">Hello</option>
</select>
$("#sas").change(function(){
$(this).val(); // This return hi
$("option:selected", this).text() // This return Hello
});

in multiselect how can i get the clicked value using jquery

Multi Select Option i Get The Clicked Value Only Using jquery.
$(document).ready(function() {
$("#mySelect").change(function() {
var firstselected = $(':selected', this).val(); //returns first selected in list
var lastselected = $(':selected:last', this).val(); //return last selected in list
alert(firstselected);
alert(lastselected);
// what if i want exact option i have clicked in list
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mySelect" class="selectpicker" multiple>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
<option>Option5</option>
<option>Option6</option>
<option>Option7</option>
</select>
var firstselected = $(':selected', this).val();//this returns first selected in list
var lastselected = $(':selected:last', this).val();//this return last selected in list
what if i want exact option i have clicked in list whether it is in middle of selected options list

you can get both all selected and current selected value
$("#mySelect option").click(function (e) {
var all = $("#mySelect :selected").map(function () {
return this.value;
}).get(); // all selected value
if (all.indexOf(this.value) != -1) { // check the condition your selecting or unselected option
alert(this.value); // current selected element
}
});
NOTE: you can get all selected value using all variable, and you can get current selected value also
DEMO

You will need to bind events on option also:
$("#mySelect").on("click", "option", function () {
console.log($(this)); //this will log the clicked option.
});
Demo :http://jsfiddle.net/lotusgodkk/GCu2D/725/

This will give you all the option you have selected from the first to last.
$(':selected',this).each(function(i, selected){
alert($(selected).val());
});
But if you want to get only the option that is just can add click listener to the options.
$("#mySelect").on('click','option',function(){
alert($(this).val());
});

You can get the clicked value using the following solution:
$("#mySelect").on('change', function(e) {
e.currentTarget.value //should return you the currently selected option
});

JQuery: How to grab what it is selected in the selector

I have a box with one select with two options.
Depending on the options i need to display a different set of checkboxes.
Depending on what the user choose on the select i will display a set of checkboxes or another.
Here i have made here an example:
http://jsbin.com/acOXisI/20/edit
How can i grab the option selected in the selector?
And subsequently how can i display or not the checkboxes fieldset?
Thank you very much!

The javascript you need is:
// hide the fieldsets on page load
$(".otion1, .otion2").hide();
$("select").change(function() {
var $this = $(this);
if($this.val() === "1") {
$(".otion1").show();
$(".otion2").hide();
} else if($this.val() === "2") {
$(".otion1").hide();
$(".otion2").show();
} else {
$(".otion1, .otion2").hide();
}
});
// prevent hidden checkboxes from being submitted
$("form").submit(function() {
$(this).find("input[type='checkbox']").filter(":hidden").each(function() {
this.checked = false;
});
});
and add some values to your select options:
<option value="1">Option 1</option>
<option value="2">Option 2</option>
See edited demo: http://jsbin.com/acOXisI/23/edit

Try:
jQuery("#selector option:selected").val();
Or to get the text of the option, use text():
jQuery("#selector option:selected").text();
More Info:
http://api.jquery.com/val/
http://api.jquery.com/text/

First off, you shouldn't have duplicate ids on the page.
Also, I'd suggest you put unique input names for all the checkboxes and always submit all of them from a single form (and you'd ignore those you don't need). The functionality you want can be achieved in many ways, one of them being hiding both fieldsets and setting a listener to the select element - you can use the onchange event, and check which one is selected and according to that show the appropriate fieldset.
When you check the submitted data, first check the select value, and then only the appropriate checkboxes.

You have to use jQuery:
$().ready(function(){
$('#selector').change(function(){
value=$(this).find(":selected").text();
console.log(value)
if (value == 'Option 1'){
$('.otion1').show()
$('.otion2').hide()
}
else{
$('.otion1').hide()
$('.otion2').show()
}
})
})
There is your bin cloned and working:
http://jsbin.com/UcaWUCA/1/edit

You can do this with jQuery. Note that hidden fields will still get submitted so they need disabling too:
$(function(){
$("#selector").on("change", function(){
$(".otion1, .otion2").hide().find("input").attr("disabled","disabled");
$("."+$(this).val()).show().find("input").removeAttr("disabled");
});
$("#selector").trigger("change");//run on load
});
http://jsbin.com/aVihIJOr/1/edit

Hi you can use $("#selector").val() to get the selected option.
$("#selector").change(function(){
option = $(this).val();
if(option == 1){
$(".option1").show();
$(".option2").hide();
} else if(option == 2) {
$(".option2").show();
$(".option1").hide();
} else {
$(".option2").hide();
$(".option1").hide();
}
});
Working example:
http://jsbin.com/acOXisI/10/edit?html,js,output

I have added unique Div Ids to your options sets and then have linked them with the exact selected value.
Example:
http://jsbin.com/acOXisI/18/edit
$(document).ready(function(){
$('#selector').change(function(){
value=$(this).find(":selected").val();
if (value == 'option1'){
$('#option1').show();
$('#option2').hide();
}
else if(value == 'option2'){
$('#option1').hide();
$('#option2').show();
}else{
$('#option1').show();
$('#option2').show();
}
});
});

Script to disable select if option selected

How would you write a script to disable a select if you have two selects (both with ids) and an option in the first select is selected.

Since you have tagged the question with jQuery, I'll give you an idea of how to do it using jQuery:
$("#firstSelectId").change(function() {
var first = $(this);
$("#secondSelectId").prop("disabled", function() {
return first.val() === "whatever";
});
});
Note that the above assumes you want to enable the second select again if a different option was selected. Here's a working example.

How about:
$('#first').change(function() {
if ($(this).val() != '') { // '' is default value??
$('#second').attr('disabled', 'disabled');
} else {
$('#second').removeAttr('disabled');
}
});

use something like:
if($("#selectbox1 option:selected").val() == ...)
to see what was selected.
and then use
$("#selectbox2").attr('disabled', 'disabled');
to disable that other box.