We Keep Coding

Jquery selected option text contains

Trying to make if condition of selected option of another select not the current which contains certain text string as a text and not the value.
Example:
<select class="Selected">
<option>Hello</option>
<option>Bye</option>
</select>
In the following case what I have is the fowling. a trigger of another select:
$(".Selected_Two").change(function () {
if ($(this).closest('.div-block').find('.Selected:contains("Bye")')) {
alert('Bye');
}
});
So basically if the select option is selected in the select when triggering the other select will have to see alert "Bye"
But it is not working at this state. Any help is welcome.

Two ways to do that indexOf() for value or :contains for option text
indexOf()
$(".Selected_Two").change(function () {
var SelectTwoValue = $(this).val();
if ($(this).closest('.div-block').find('.Selected)').val().indexOf(SelectTwoValue ) > -1) {
alert('Bye');
}
});
:contains and length
$(".Selected_Two").change(function () {
var SelectTwoValue = $(this).val();
if ($(this).closest('.div-block').find('.Selected option:selected:contains("'+SelectTwoValue+'")').length > 0) {
alert('Bye');
}
});
Maybe you'll need to work around .val().indexOf() and :contains("'+SelectTwoValue+'")').length .. but I think you got the point

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

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();
}
});
});

jQuery Option De-Select Event?

I would like to detect the event where an option is de-selected from a select element. So for instance, if my HTML is:
<select id="select_box">
<option value="1">Hot</option>
<option value="2">Cold</option>
<option value="3">Just Right</option>
</select>
And the second option is selected (value="2"), and then the user de-selects it by clicking on another option (such as value="3") or clicking the same option again, how do I detect that event using jQuery? My goal is to fire off a function when it happens.
I tried the following:
$("#select_box option:selected").change(function() {
console.log($(this).val());
});
But it didn't work.

The change event should go on the select element itself:
$("#select_box").change(function() {
console.log($(this).val());
});
This event fires when the value of the select is changed and will match the behaviour you require.
I want the value of the option that was de-selected.
In that case you would need to store the previous value when it's selected, something like this:
$("#select_box").change(function() {
var $select = $(this),
currentValue = $select.val(),
oldValue = $select.data('previous-value');
// do stuff...
$select.data('previous-value', currentValue);
});

Well, this is how I would handle this with with a change Event listener.
$("#select_box").on('change', function(e){
var $t = $(this), data = $t.data('last') || {optText:'none', val:'none'};
$t.next().text('last was ['+data.optText+'] and its value is "'+data.val+'"').end()
.data('last', {optText:$t.children('[value="'+$t.val()+'"]').text(), val:$t.val()});
});
Fiddle HERE

I would enable the element when the option is selected using the one() event binding method

change event will fired only when value is changed which is required by you
$("#select_box").change(function() {
console.log(this.value);
});

You can do it manually some thing like below code i given,
var xSelectedOption = 0;
$("#select_box").change(function() {
if(xSelectedOption != $(this).val())
{
xSelectedOption = $(this).val();
console.log("Option was changed!");
}
});