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>
Related
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
});
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
});
I am trying to bind on-change event with my HTML select , but not successful in this,
This is my HTML code
<div class="size clearfix">
<form>
<label for="Size"><spring:theme code="product.variants.size"/></label>
<select id="Size">
<option>..</option>
<option>..</option>
<option>..</option>
</select>
</form>
</div>
And this is how, I am trying to bind onChange event
$(document).ready(function ()
$("#Size").change(function () {
var url = "";
var selectedIndex = 0;
$("#Size option:selected").each(function () {
url = $(this).attr('value');
selectedIndex = $(this).attr("index");
});
if (selectedIndex != 0) {
window.location.href=url;
}
});
});
But somehow this is not working, not sure what I am doing wrong.Just to add all this code is in $(document).ready(function ()
By not working means, event is not getting fired at all
There is no index attribute, you should read the selectedIndex property of the select element.
var selectedIndex = this.selectedIndex;
Also since you don't have a multiple select element, the each call here is redundant. this.value gives you the current select's value.
$("#Size").change(function () {
if (this.selectedIndex > 0) {
// Assuming your options have `value` attribute
window.location.href= this.value;
}
});
For the sake of completeness for getting the index of the selected option in the each callback you could use the index method:
$(this).index();
Since attr('index') returns an undefined value your condition is always falsy.
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!");
}
});
I'd like jQuery to detect when the option with the id trade_buy_max is selected.
$(document).ready(function() {
$("option#trade_buy_max").select(function () {
//do something
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<select name='type' id='type'>
<option id='trade_buy' value='1' selected='selected'>Buy</option>
<option id='trade_buy_max' value='1'>Buy max</option>
<option id='trade_sell' value='2'>Sell</option>
<option id='trade_sell_max' value='2'>Sell max</option>
</select>
I've tried the following, but it doesn't seem to work.
Any ideas?
This works...
Listen for the change event on the select box to fire and once it does then just pull the id attribute of the selected option.
$("#type").change(function(){
var id = $(this).find("option:selected").attr("id");
switch (id){
case "trade_buy_max":
// do something here
break;
}
});
What you need to do is add an onchange handler to the select:
$('#type').change(function(){
if($(this).val() == 2){
/* Do Something */
}
});
you can bind change event on its select instead, then check if option selected
$("select#type").change(function () {
if( $("option#trade_buy_max:selected").length )
{
// do something here
}
});
$("option#trade_buy_max").change(function () {
opt = $(this).children("option:selected").attr('id');
if(opt == '#trade_sell_max'){
// do stuff
}
});
Untested, but that should work.
Use the change event and get the id attribute of the selected option:
$('#type').change(function () {
var selectedId = $('option:selected', this).attr('id');
if (selectedId == "trade_buy_max") {
// do something
}
});
Change .select to .change and put space before #