jquery selected value of select box doesn't change result - javascript

I am trying to change the price result using .change on the storage select box by using the chrome console but what happens is that the price doesn't update.
I tried different other ways such as .click .trigger , still the select box switches between 16gb to 64gb back and forth but the price doesn't update. The price only updates when I manually change the select box value with the mouse.
What might be causing it not to switch? Are there any alternative way to trigger the event by code?
*** edit: this is not my code, I am just trying to understand how to get the data if the .click doesn't work through the console

The click() method is not necessary unless you explicitly want to trigger that event.
I've added a click() event listener and call on the last change here.
var select = $("#test_select");
select.on('click', function() {
alert('click event');
});
setTimeout(function() {
select.val("2");
}, 1000);
setTimeout(function() {
select.val("3");
}, 2000);
setTimeout(function() {
select.val("4");
}, 3000);
setTimeout(function() {
select.val("5").click();
}, 4000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="test" id="test_select">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

Related

Execute jQuery function on load and change

I have a select field in a form, and wish to execute some jQuery when the field is changed or when the page is reloaded on form submit.
<select name="emp_status_id" class="emp-status-id" >
<option value=""></option>
<option value="1">Full-Time Employment</option>
<option value="2">Part-Time Employment</option>
<option value="3">Casual</option>
<option value="4">Self Employed</option>
</select>
My jQuery is below
function employmentGroups(id){
var emp_status_id = id.val();
// Do more stuff here
};
$( ".emp-status-id" ).change(function() {
employmentGroups($(this));
});
Not: I am passing $(this) into the function rather than getting $(this) inside the function for another reason which isn't relevant to the current question.
This works perfectly well on change.
I would also like to execute the function on page load,
My problem is that I do not understand which jQuery method to use to execute this function on load.
I have tried this...
$( ".emp-status-id" ).ready(function() {
employmentGroups($(this));
});
However this does not work.
Better way to access this selectbox value by id.
Here is working code:
<select id="emp_status_id" name="emp_status_id" class="emp-status-id" >
<option value=""></option>
<option value="1">Full-Time Employment</option>
<option value="2">Part-Time Employment</option>
<option value="3">Casual</option>
<option value="4">Self Employed</option>
</select>
function employmentGroups(selector_id){
var emp_status_id = $(selector_id).val();
// Do more stuff here
};
// on page loaded
$(function() {
// set onchange handler
$("#emp-status-id").change(function() {
employmentGroups('#emp-status-id');
});
// just execute
employmentGroups('#emp-status-id');
});
$(document).ready(function(){ employmentGroups($( ".emp-status-id" )); })
Looking for this?
there's two ways to do such a thing like this
1- using load() but this will fire whatever the code inside every time page reload even when the use open the page for the first time
$(window).load(function() {
// do whatever you want
});
2- using built-in PerformanceNavigation interface ... i didn't test such a case to use it but it exactly for detecting navigation behavior
if (performance.navigation.type === 1) {
console.log('page reloaded');
}
or (is the same as above but with different syntax)
if (performance.navigation.type === PerformanceNavigation.TYPE_RELOAD){
console.log('page reloaded');
}
for further reading W3 and MDN

html form reset not doing triggering select onchange

I am having a form where the fields need to change according to my select.
But when I hit the reset the select resets back to default, but the onchange event on the select is not triggered. Is there anyway so that I can add that to my javascript?
I am resetting using a button with type="reset"
$('#newHistoryPart select[name="roundType"]').on('change', function (data)
{
$(".answerType").hide();
selected = $(this).find("option:selected").val();
roundTypeChange(selected);
});
From my comment above, use onreset event instead of onchange:
$('#yourform').on('reset', function(){
// do something
});
What you need to do is, trigger the change event manually when the reset button is clicked. See Fiddle here
$('select').on('change', function ()
{
alert('on change');
});
$('input[type="reset"]').click(function() {
$("select").trigger('change');
});`
you can use
$('select[name="roundType"]').prop('selectedIndex',0);
DEMO HERE
This may help you, replace alert lines with your activity code.
JSFiddle
HTML
<select name="opt" onchange="getval(this)">
<option value="Select" selected disabled>Select</option>
<option value="op1">Option 1</option>
<option value="op2">Option 2</option>
</select>
JavaScript
function getval(sel) {
if (sel.value == "op1") {
alert("Option 1 Selected");
} else if (sel.value == "op2") {
alert("Option 2 Selected");
}
else
{
alert("EXCEPTION !");
}
}

How to stop a select menu form opening or changing?

$('#selectmenu').on('keyup focus mousedown', function(e) {
e.preventDefault();
});
but when it is selected by pressing tab i can change the value by pressing up & down key.how to stop it?
Block the tab key.
$('/*The Previous Input */').on('keydown', function(e) {
if (e.keyCode == 9) {
e.preventDefault();
}
});
I don't have your HTML, so i can't test or integrate the code.
You also can use disabled="disabled", i think is a better solution.
You use off() or unbind() methods of jQuery:
<select id="dropDown" name="dropDown" style="margin-top: 5px; width: 150px;">
<option value="select">Select </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="All">All </option>
</select>
<button id="stopChange" >Stop</button>
<button id="StartChange" >Start</button>
jQuery code:
$("#stopChange").click(function () {
$("#parSelCategor").unbind("change");
});
$("#StartChange").click(function () {
$("#parSelCategor").bind("change");
});
You may listen you a more global event like 'onchange' and change the value back to the previous one when the event trigger.
Disabling the select may work too.
Edit : 'keydown' seems like a good idea too.
you can change the tabindex of the select box
$('#selectmenu').attr('tabindex', -1).on('keyup focus mousedown', function (e) {
e.preventDefault();
});
or best way is just disable the control
$('#selectmenu').attr("disabled", true);
Demo
Here's a solution that simply forces the selection to stay the same if some variable (stopChange) is true.
JS (jQuery):
var stopChange = true;
var opt = $('option:selected');
$('#selectmenu').on('change', function () {
if (stopChange) {
opt.attr('selected', true);
}
});
Here's a fiddle.

order of Events for Select element in html

I only tested this so far in chrome browser.
I have the html select element below defined:
HTML
<select class="ddl" size="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
I have the following script:
Javascript + jQuery
$(document).ready( function () {
$('.ddl').change( function () { alert('ddl changed'); });
$('.ddl').click( function () { alert('ddl clicked'); });
});
In the browser,
- if you quickly click on an item in the list box, you will see that the order of events start with change then click.
- if you hold the mouse down for a 10 seconds then release it (long press), click fires then change.
jsFiddle
I change the code to below script (add mouseup event),
Javascript + jQuery
$(document).ready( function () {
$('.ddl').change( function () { alert('ddl changed'); });
$('.ddl').click( function () { alert('ddl clicked'); });
$('.ddl').mouseup( function () { alert('ddl mouseup'); });
});
I get mouseup, change, then click regardless of the speed of the click.
jsFiddle
Isn't the order of events supposed to stay the same? Is this a chrome bug?
UPDATE
In firefox, change, mouseup, and then clicked on a fast click, and only click event is eliminated on a slow click.
In IE11, change then click is fired on fast click, only mouseup is fired on slow click.
UPDATE with adeneo's suggestion:
jsFiddle1
Javascript + jQuery
$(document).ready( function () {
$('.ddl').change( function () { console.log('ddl changed'); });
$('.ddl').click( function () { console.log('ddl clicked'); });
});
Chrome: no change
Firefox: no change
IE11: no change
jsFiddle2
Javascript + jQuery
$(document).ready( function () {
$('.ddl').change( function () { console.log('ddl changed'); });
$('.ddl').click( function () { console.log('ddl clicked'); });
$('.ddl').mouseup( function () { console.log('ddl mouseup'); });
});
Chrome: no change
Firefox: no change
IE11: no change
UPDATE based on Wesley Murch's suggestion:
I have a software package that I am working with. The software package generates HTML dynamically (template driven). The feature I am working on is Cascading dropdowns. There are some dropdowns in that have attributes to show hierarchy. To build the the dependency, I thought I would bind to the change event and call a webservice to update the child dropdown. Now the dilemma I have is that there is pre-existing code that binds to various events. I think the pre-existing code has some code that stops processing of subsequent events. I cannot change that code at the time being. I always thought that the change event is triggered before the click event. It works fine if you do a quick click in chrome, but if you hold your mouse down while you think of the selection for a couple seconds my code for cascading dropdown does not get called.
Sorry for the lengthy explanation.
<script>
$(document).ready(function () {
$('.ddl').change(function () {
console.log("change");
});
$('.ddl').click(function () {
console.log("click");
});
});
</script>
<select class="ddl" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
order
click select.html:15
change select.html:11
2
click select.html:15
change select.html:11
click

Getting rid of the onclick when clicked with jQuery

ok so i have some select tags of cities
<select onchange="storeCity(this.value, false)" name="search[city]" id="search_city" class="left">
<option value="">== Select City ==</option>
<optgroup label="Florida"><option selected="selected" value="ft-myers-sarasota-fl">Ft. Myers / Sarasota </option>
<option value="jacksonville-fl">Jacksonville</option>
<option value="miami-fl">Miami / Ft. Lauderdale </option>
<option value="orlando-fl">Orlando</option>
<option value="tampa-fl">Tampa</option></optgroup></select>
Some cities are not available now so i needed a lightbox to popup when they are clicked...which i have working with this code
$('#search_city').change(function(e) {
e.preventDefault();
if ($(this).val() == 'jacksonville-fl' || $(this).val() == 'miami-fl' || $(this).val() == 'tampa-fl' || $(this).val() == 'ft-myers-sarasota-fl') {
}
The problem I have is that it goes to the link anyways and i need it to get rid of the link or the onchange on the select...something is getting the page to refresh...but i dont know what
storeCity(this.value, false) might have caused the refresh
BTW, you can merge the code like this:
$('#search_city').change(function(e) {
storeCity(this.value, false);
if (this.value.match(/(jacksonville-fl|miami-fl|tampa-fl|ft-myers-sarasota-fl)/i)) {
//do some stuff
}
e.preventDefault();
});
You could probably use jQuery's .one() function for this. E.g.
$('#search_city').one('change', function() {
/* Your code */
});
The change event will only execute once.
you have a method called
storeCity(this.value, false)
on change event , this might be refreshing the page. check that out.
Also a word of warning - I'd not use e.preventDefault() on a CHANGE event (unless you really need to), as it can have some weird behaviour in some browsers. Usually that's just for CLICK events.

Categories