We Keep Coding

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

jQuery collection gets broken inside each loop (remove elem, restore innerHTML)

I expected the following code to iterate through a select options and remove options having a certain value, otherwise restore the select html
var initialHTML = $('#myselect').html();
$('#myselect option').each(function(){
if($(this).val() === 'b'){
$(this).remove();
console.log('matching. removed.');
return false;
}else{
$('#myselect').html(initialHTML);
console.log('not matching. html restored.');
}
});
Expected select would be:
<select id="myselect">
<option value="a">a</option>
<option value="c">c</option>
</select>
but it actually is
<select id="myselect">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
What I'm doing wrong? FIDDLE
Update e.g. as someone suggested:
The $('#myselect option') constructs a list of options, and
$(this).remove() removes option b, but the list of options is no
longer linked to the HTML, because the HTML had been already changed
by $('#myselect').html(initialHTML) which was executed for option
a
so, I've realised that the actual problem is not even related to what I asked initially in my question. Sorry for that and I'll try to put it in the right section.
p.s. a working solution:
var initialHTML = $('#myselect').html();
function doIt(){
$('#myselect').html(initialHTML);
$('#myselect option').each(function(){
if($(this).val() === 'b'){
$(this).remove();
}
});
}
Thank you so much for help.

The main issue is this line:
$('#myselect').html(initialHTML);
It is executed for option a and then option b can no longer be removed because the HTML has changed even though it is actually identical. So remove that line and your code will work.
$('#myselect option') constructs a list of options, and $(this).remove() removes option b from the list, but the list is no longer associated with the HTML, because the HTML had been already changed by $('#myselect').html(initialHTML) which was executed for option a.
var initialHTML = $('#myselect').html();
$('#myselect option').each(function() {
if (this.value === 'b') {
$(this).remove();
console.log('matching. removed.');
return false;
} else {
//$('#myselect').html(initialHTML);
console.log('not matching. html restored.');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
I changed $(this).val() to this.value. Both will work, but the second one is a bit more efficient because there is no point in converting the JavaScript object to a jQuery object just to get the value.
However, remember that the line:
return false;
will cause the each() loop to exit once a match is found. That's OK if there will only be one match. If there can be more that one match, remove that line so the loop can go through all options.

Here is an alternative way:
Other answers already point out the reason, as because you refresh the option list the during the first iteration, $(this).remove() no longer works because it lose contact of the original item. Thus, a simple fix here would be re-select the target based on it's value. And you can keep your original code of $('#myselect').html(initialHTML); in the loop.
var initialHTML = $('#myselect').html();
$('#myselect option').each(function(){
if($(this).val() === 'b'){
$("option[value='" + $(this).val() + "']").remove();
console.log('matching. removed.');
return false;
} else {
$('#myselect').html(initialHTML);
console.log('not matching. html restored.');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
<option value='a'>a</option>
<option value='b'>b</option>
<option value='c'>c</option>
</select>

Try this:
you don't need else part as it is already present and put your jquery inside document.ready so that it will ensure DOM is ready and you can run the jquery script.
var initialHTML = $('#myselect').html();
$(document).ready(function(){
$('#myselect option').each(function(){
if($(this).text() == 'b'){
$(this).remove();
console.log('matching. removed.');
return false;
}
});
});
JSFiddle

What is happening here is that you have something that only needs to be false once to restore the entire select. So it does remove 'b' when it finds it, but then restores the whole select once it sees that 'c' !== 'b'.
You can achive your expected behavior by removing:
else{
$('#myselect').html(initialHTML);
console.log('not matching. html restored.');
}
Depending on what your ultimate goal is, there may be better ways of approaching this, though.
Hope that helps.

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).

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.

Infinite loop of jQuery focus() event with a <select> element

I have this HTML:
<select id="select-one">
<option value="">Choose</option>
<option value="1">House</option>
</select>
<select id="select-two">
<option value="">Choose</option>
<option value="A">Table</option>
</select>
And this Javascript with JQuery
$("#select-two").focus( function() {
if( $("#select-one").val() == "" ) {
alert("Fill select-one first!");
return false;
}
});
So i am getting a infinite loop with alerts because after call alert() Javascript puts the focus again in the same select (select-two).
Someone can help me to solve this please?

Note: based on your comments, this assumes you must listen to the focus event.
Solution 1 - using blur() - effective but buggy in Chrome
In theory, the focus event is not cancelable, so return false or event.preventDefault() will have no effect in this case. However, in practice, you can reverse the event by using the blur() method.
For example:
$('#select-two').on('focus',function () {
if ($("#select-one").val() == "") {
$(this).blur();
alert('Fill select-one first!');
return false;
}
});
See jsFiddle demo
This effectively prevents the field from regaining focus after the alert call and so the focus event is not repeated. The only problem is that in Chrome even though the field is not focused anymore, the dropdown remains open (see demo).
Solution 2 - using remove() and clone() - costly but cross-browser
If Chrome's behavior is problematic, you can take a more crude approach, whereby you remove() the select from the DOM, clone() it and then reinsert it into the DOM. This will effectively "reset" the select element completely, leaving it without focus as well as closed.
For example:
$(document).on('focus','#select-two',function (e) {
if ($("#select-one").val() == "") {
$(this).remove().clone().insertAfter('#select-one');
alert('Fill select-one first!');
return false;
}
});
See jsFiddle demo
The upside of this approach is that it works well in Chrome too. The downside of this approach is that it involves manipulating the DOM for a very trivial issue.

I think you need an extra event that change content select-two when the value of select-one has "" like this:
HTML
<select id="select-one">
<option value="">Choose</option>
<option value="1">House</option>
</select>
<select id="select-two">
<option value="">Choose</option>
<option value="A">Table</option>
</select>
JS
$("#select-one").change(function() {
if ($(this).val() == "") {
$("#select-two").val("");
}
});
$("#select-two").focus(function() {
if( $("#select-one option:selected").val() == "" ) {
alert("Fill select-one first!");
$("#select-one").focus();
return false;
}
});
Demo