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

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

Changing the value of a variable after an event

Right now in the below code the var selected doesn't change (it outputs the empty string i guess). I need you to help me change the selected variable so that the value should be the selected option all of the time (in the select element). I also want to be able to use that updated variable later in the code outside of the isSelected function.
var isSelected = (function(){
var selected = "";
return {
add : function(){
$("select").on("change", function(){
selected = $(this).val()
})
},
output : function(){
alert(selected)
}
}
})()
$("select").on("change", function(){
isSelected.add();
isSelected.output();
})
Thanks im trying my best to learn programing

var isSelected = (function(){
var selected = "";
return {
add : function(el){
selected = $(el).val();
},
output : function(){
alert(selected)
}
}
})()
$("select").on("change", function(e){
e.preventDefault()
isSelected.add(this);
isSelected.output();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
Use this keyword to get current object. Please check the solution, hope this is what you need

The problem is binding to the change event in the add() function. You've already captured the change event, so when add() runs, it adds another change handler, which won't be triggered until the next change event fires.
The solution is to pass the selected value to add() as an argument.
I also want to be able to use that updated variable later in the code
Simply add another function, something like getSelected() which returns the value.
var isSelected = (function(){
var selected = "";
return {
add : function(value){
selected = value;
},
output : function(){
alert(selected);
},
getSelected : function(){
return selected;
}
}
})();
$("select").on("change", function(){
isSelected.add(this.value);
isSelected.output();
var selected = isSelected.getSelected();
console.log(selected);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>

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!");
}
});

Select one option from each combobox

I have 6 html selects on a form, each of which contains the same 8 options.
If an option has been chosen from one of the selects, then I'd like that option to be disabled in all other selects. I'd like the option to still be visible (i.e. it must not be removed).
Is there a jquery plugin or similar that can be used?

Try it here: http://jsfiddle.net/jbjkm/3/
$.fn.exclusiveSelectSet = function() {
var set = this, options = this.find('option');
return this.change(function() {
var selected = {};
set.each(function(){ selected[this.value] = true });
options.each(function() {
var sel = this.parentNode;
this.disabled = this.value && selected[this.value] &&
sel.options[sel.selectedIndex] != this;
});
}).change();
}
$('select.loves').exclusiveSelectSet();
$('#likes select').exclusiveSelectSet();
In English, whenever a select value is changed:
Find the values of all selected options.
Disable any option that has one of the selected values,
unless it doesn't have any value (value="") or it is the selected option in its <select>.

to disable/enable all other checkboxes with the same value add this Javascript:
$(document).ready(function(){
$('input[tpye="checkbox"]').change(function(){
if($(this).is(':checked'))
$('input[value="'.$(this).val().'"]').each(function(){
$(this).attr('disabled', true);
});
else
$('input[value="'.$(this).val().'"]').each(function(){
$(this).removeAttr('disabled');
});
});
});
if u use selects try this:
$(document).ready(function(){
$('select').change(function(){
$('option:disabled').each(function(){
$(this).removeAttr('disabled');
});
$('select').each(function(){
var v = $(this).val();
$('option[value="'+v+'"]').each(function(){
if($(this).parent() != $(this))
$(this).attr('disabled',true);
});
});
});
});
EDIT: ah, right, enable all option before disabling some (reset)