Forcing multiple select changes and then reading the event - javascript

I'm relatively new to jquery. I've been banging my head against this issue for a week now trying to figure out a way to do it.
Basically, I have two identical selects that change a displayed number to 1 when selected, and then when changed to a different selection, change that original number back to 0. My original code worked fine, but I wanted to expand the code so that users could save a generated URL and reload their selections at a later date.
Here is the working HTML. Same thing for the second select, only with the ID of ability2.
<select id="ability1" onchange="attributeChoice( event )"><option value="selected">Select</option><option value="val1">One</option><option value="val2">Two</option><option value="val3">Three</option><option value="val4">Four</option><option value="val5">Five</option><option value="val6">Six</option></select>
And the working jquery
function attributeChoice( event ) {
$( event.currentTarget ).change(function() {
var attributeChange = this.id;
var attributeSelect = $(this).find('option:selected').attr('value');
$('span#' + attributeSelect).html( 1 );
$('select#' + attributeChange ).on( 'change', function() {
$('span#' + attributeSelect).html( 0 );
});
getTotals();
});
}
And then this bit of code disables the selected option of the other select so it can't be selected twice.
$('select').change(function() {
$('select#ability1, select#ability2').not(this).children('option[value=' + this.value + ']').attr('disabled', true).siblings().removeAttr('disabled');
$('select#ability1, select#ability2').not(this).children('option[value=selected]').attr('disabled', true);
});
From what I've read, I need to use a .change() to force the onchange of the select to fire. So far I'm not having any luck. Originally I had the attributeChoice function setup using event.target but I learned that it actually looks all the way back to beginning of what triggered it. I switched over to using this and event.currentTarget instead.
Here is my code I've been toying with. Any ideas on what I'm doing wrong here? (hattr1 is the index of the selected item that is pulled from the URL)
$('select#ability1').change(function() {
$('select#ability1 option').eq(hattr1).prop('selected', true);
$('select#ability1').change();
});

If you want to select a pre-determined option in the select on the change event, call $.preventDefault() on the change event, and then use $.prop() to select the option as you're already doing.
var $select = $('#ability1'),
hattr1 = 3;
$select.on('change',function(e) {
//e.preventDefault();
$(this).find('option').eq(hattr1).prop('selected', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ability1">
<option>1</option>
<option selected>2</option>
<option>3</option>
<option>4</option>
</select>

Related

ACF Select value adds class to div if value is not equal

I'm using ACF for the first time and struggling to get this to work. I've created a Select field with 2 options (This is controlled backend on the specific page)
<select id="acf-field_5bf80363f0c0f" class="" name="acf[field_5bf80363f0c0f]" data-ui="0" data-ajax="0" data-multiple="0" data-placeholder="Select" data-allow_null="0">
<option value="No Issues">No Issues</option>
<option value="Issues reported" selected="selected" data-i="0">Issues Reported</option>
</select>
What i would like to achive is that if selected option is not equal to No Issues, it would add a custom class (.Error) to the selected div with the id #ServiceStatus1 for example. I've attempted with my limited knowledge of jQuery but no joy.
Hope this makes sense, any advice is really appreciated.
<script type ="text/javascript">
$(function() {
$('#acf-field_5bf80363f0c0f').ready(function(){
$('.Error').hide();
$('#ServiceStatus1' + $('.Error').val() != 'No Issues').show();
});
});
</script>
Your question and your code seem to be asking different questions...
If you want to add/remove a class based on the value in the select, you could do:
$(function() {
function addServiceStatusClass(e){
if($(this).val() != 'No Issues'){
$('#ServiceStatus1').addClass('Error');
}else{
$('#ServiceStatus1').removeClass('Error');
}
}
$('#acf-field_5bf80363f0c0f').ready(addServiceStatusClass);
$('#acf-field_5bf80363f0c0f').change(addServiceStatusClass);
});
Example:
http://jsfiddle.net/m2o361th/2/
But if all you want to do is show/hide #ServiceStatus1 based on the value, you can do:
$(function() {
function addServiceStatusClass(e){
if($(this).val() != 'No Issues'){
$('#ServiceStatus1').show();
}else{
$('#ServiceStatus1').hide();
}
}
$('#acf-field_5bf80363f0c0f').ready(addServiceStatusClass);
$('#acf-field_5bf80363f0c0f').change(addServiceStatusClass);
});
Example:
http://jsfiddle.net/m2o361th/3/
Also as a reminder, if you're using the version of jQuery included with WordPress, you have to wrap your functions in a function mapped to jQuery:
(function($){
// contains one of the above functions...
})( jQuery );
Thank you so much for the above. I've tweaked your above code to factor in that the select field is backend and my div is frontend. The working code for this is...
$(function() {
function addServiceStatusClass(e){
if($('#Multistream').text() != 'No Issues'){
$('#ServiceStatus1').addClass('Error');
}else{
$('#ServiceStatus1').removeClass('Error');
}
}
$('#acf-field_5bf80363f0c0f').ready(addServiceStatusClass);
$('#acf-field_5bf80363f0c0f').change(addServiceStatusClass);
});
})( jQuery );

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

How do I keep the option selected when it changes and I need to reload the page?

I have the following HTML select:
<select class="form-control" id="band_id" name="band_id">
<option selected="selected" value="">Choose a band...</option>
<option value="66">Adolfo Little</option>
<option value="96">Aisha Bosco</option>
<option value="90">Alize Glover</option>
</select>
I need to build a filter where the condition is the #band_id selected so I made this jQuery code:
$("select#band_id").change(function (ev) {
ev.preventDefault();
var band_id = $('select#band_id');
if (band_id.val() != undefined) {
band_id.attr('selected', 'selected');
}
location.href = '/albums/bands/' + band_id.val();
});
Because the location.href the page gets reloaded and the URL changes so the SELECT is reset and I "loose" the selected value.
I can think in two ways to fix this:
Using AJAX which I don't want because is over complicate something easy
Grab the band_id from the URL and then set the selected property which I don't know how to achieve.
I don't know is there any other way to achieve this. Do you have any other idea? (if it's with an example better)
You can use localStorage for that:
if (localStorage.getItem("band_id")) {
$("select#band_id").val(localStorage.getItem("band_id"))
}
$("select#band_id").change(function (ev) {
ev.preventDefault();
if ($(this).val() != undefined) {
$(this).attr('selected', 'selected');
localStorage.setItem("band_id", $(this).val());
}
location.href = '/albums/bands/' + $(this).val();
});
If we have the value saved - set the value of the select element to that values.
Once we change the value in the select element - save the new value in the localStorage.
Note that I removed the usage of the band_id from this example as it's not needed. You have this you can use inside the change function.
I'm also not sure why you change the selected attribute - you redirect the user immediately to a new page (this change will have no effect at all).

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

jQuery Show / Hide Option Based on Input Value

I have a form that needs to display specific select options ("locations") based on the user's ZIP, which is in a number field above. In this example, I need the option "Out of Range" to hide and the "In Range" to show when the user enters "12345" in the input.
This is my HTML:
<!--Zip-->
<div class="zip-field">
<label for="zip">Zip Code</label>
<input type="number" id="zip" name="zip" />
</div>
<!--Location-->
<div class="location-field">
<label for="location">Location</label>
<select id="location" name="location">
<option value="In Range">In Range</option>
<option value="Out of Range">Out of Range</option>
</select>
</div>
This is my jQuery:
$('#zip').on('change',function(){
if ( $(this).val() == "12345" ) {
$("#location option[value='In Range']").show();
$("#location option[value='Out of Range']").hide();
}
});
Should be pretty straightforward, but no cigar.
There are two things you need to change here:
You need to set an event handler to the zip input element. $('#zip').val( ... ); only sets the value once when that line is executed.
You need to select the option better. $("#location option[value='In Range']").show(); will not show the option you want. You have to set the value of the selector input to a value that matches the option you want.
Change your javascript to this:
$("#zip").on('blur', function(){
if ( $(this).val() == "12345" ) {
$("#location").val("In Range");
}else{
$("#location").val("Out of Range");
}
});
Notice that I'm using $('#zip').on('blur', ...); to register an event handler, setting it to the blur event and passing in a function to be executed when that event fires.
Then I set the value of the location selector input to the correct value of the option you want to select.
DEMO
Hiding an option won't work across browsers, it is same as binding event to option elements you can do only very limited thing with them. instead remove them and cache them for later use.
$(function(){
var $location = $('#location');
$location.data('options', $location.find('option')); //cache the options first up when DOM loads
$('#zip').on('change', function () { //on change event
$location.html($location.data('options')); //populate the options
if ($(this).val() == "12345") { //check for condition
$location.find("option[value='Out of Range']").remove(); //remove unwanted option
}
});
});
Fiddle
You should monitor the the value as it changes using the method below:
$('#zip').on('keyup',function(){
$("#location").val('Out Of Range');
if ( $(this).val() == "12345" ) {
$("#location").val('In Range');
}
});
The on function binds an event listen to that Element. The keyup event listens for when the key is released inside the your field. You can then compare the value to what ever and show / hide as needed.

Categories