How to make 2 JavaScript function's execution mutually exclusive? - javascript

I have two select elements with several options, I chain them together so that each updates automatically when the other one changes.
// ########### Linked Labour Select Boxes
$('body').on('change', '#labourList > li .labourerID', function() {
var id = $(this).val();
$(this).parent().find('.labourerName').val(id).change();
});
$('body').on('change', '#labourList > li .labourerName', function() {
var id = $(this).val();
$(this).parent().find('.labourerID').val(id).change();
});
At the moment one method will trigger the other one making my page a bit slow, how can i avoid that?


I have used a flag to communicate that the change that occurred on the select is because of user of the script.
Check this.
When the user changes one select nothing is executed in second select so the change chain is broken.
var script_triggred_change = false;
$("#one").change(function() {
console.log("Called One");
if (script_triggred_change) return;
script_triggred_change = true;
$("#two").val($("#one").val()).change();
script_triggred_change = false;
});
$("#two").change(function() {
console.log("Called Two");
if (script_triggred_change) return;
script_triggred_change = true;
$("#one").val($("#two").val()).change();
script_triggred_change = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="one">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="two">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>


Try this
var once = false;
$('select').on('change', function(e) {
if(once) {
once = false;
return;
}
once = true;
$('select').not(this).val($(this).val()).change();
});
select, option {
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<select class="lab-ids">
<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>
</select>
<select class="lab-name">
<option value="1">Peter</option>
<option value="2">Hans</option>
<option value="3">Fritz</option>
<option value="4">Sandra</option>
<option value="5">Jessy</option>
</select>
</div>

Related

How to add onload to an onchange function

Thank you in advance or any help you can offer. I am building a menu with selection and options. After a chapter is selected, it will display the page options available. However, I would like it to default to showing the chapter one pages when the website first loads, instead of showing nothing. I can't seem to figure this one out. The code I have is as follows:
<script>
window.onload = function() {
document.getElementById("Chapter").onload = function () {
if (this[this.selectedIndex].value === "1") {
document.getElementById("c1").className = "show";
}
};
</script>
<script>
document.getElementById("Chapter").onchange = function () {
if (this[this.selectedIndex].value === "1") {
document.getElementById("c1").className = "show";
} else {
document.getElementById("c1").className = "";
}
if (this[this.selectedIndex].value === "2") {
document.getElementById("c2").className = "show";
} else {
document.getElementById("c2").className = "";
}
};
</script>
The onload code currently does nothing, but the onchange works as anticipated.
Thank you so much for your time.
Edit:
The HTML example is as follows:
<div class="jump-options text-center">
QUICK JUMP: CHAPTER
<select id="Chapter">
<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> PAGE
<select id="c1" name="Page">
<option value="1p0">0</option>
<option value="1p1">1</option>
<option value="1p2">2</option>
<option value="1p3">3</option>
<option value="1p4">4</option>
<option value="1p5">5</option>
</select>
<select id="c2" name="Page">
<option value="2p0">0</option>
<option value="2p1">1</option>
<option value="2p2">2</option>
<option value="2p3">3</option>
<option value="2p4">4</option>
<option value="2p5">5</option>
</select>
</div>

Most DOM elements don't have onload events. This event only fires on elements that need to get their contents from external sources, like images and iframes.
You don't want to assign an onload handler, what you want to do is trigger the change event on #Chapter.
window.onload = function() {
document.getElementById("Chapter").dispatchEvent(new Event("change"));
}

how to preserve all select elements selected values in jquery

Can you help me to solve this problem.
The problem is this.
I have multiple select lists with same class name but different ids. If user select same option which is already selected in other select list then there should be an alert. and after alert the current select list which is clicked or changed should be restore to the previous value. for example we have 3 select boxes name as A1, A2, A3. Each one have same values for example 1,2,3,4. A1 selected value is 1, A2 selected value is 2 and A3 selected value is 3. Now if your want to change A1 value from 1 to 2 then there should be an alert like "Already selected". After this alert A1 list should be restored back to its original value which is 1. I tried the following code. In this code I can get already existing alert but the value of the last changes select box is changed to new one.
$(document).ready(function(){
var init = true;
if(init == true){
var a = new Array();
$(".brand-list").each(function(i, obj){
var current_obj_id = $(this).attr('id');
var current_obj_value = $('#'+ current_obj_id + " option:selected").val();
a[current_obj_id] = current_obj_value;
});
init = false;
}
$(".brand-list").change(function(){
a[$(this).attr('id')] = $('#'+ $(this).attr('id') + " option:selected").val();
var current_selected_obj_id = $(this).attr('id');
var current_selected_obj_value = $('#'+ $(this).attr('id') + " option:selected").val();
$(".brand-list").each(function(i, obj){
var current_obj_id = $(this).attr('id');
var current_obj_value = $('#'+ current_obj_id + " option:selected").val();
if(current_obj_id != current_selected_obj_id){
if(current_selected_obj_value == current_obj_value){
alert("current element global value: "+ a[current_selected_obj_id]);
$('#'+ current_selected_obj_id + " option[value=" + a[current_selected_obj_id] +"]").attr('selected','selected')
alert("already selected");
}
}else{
a[current_obj_id] = current_obj_value;
}
});
});
$( ".brand-list" ).focus(function() {
var current_selected_obj_id = $(this).attr('id');
var current_selected_obj_value = $('#'+ $(this).attr('id') + " option:selected").val();
a[current_selected_obj_id] = current_selected_obj_value;
console.log(a[current_selected_obj_id]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="inputBrand-1" class="brand-list">
<option value="-1">SELECT A BRAND</option>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="inputBrand-2" class="brand-list">
<option value="-1">SELECT A BRAND</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="inputBrand-3" class="brand-list">
<option value="-1">SELECT A BRAND</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
</select>
Hopefully you can understand my question, because I'm not get to ask question which community members can understand easily. Thanks

You can save the previous value and check it then
$(document).ready(function(){
var init = true;
if(init == true){
var a = new Array();
$(".brand-list").each(function(i, obj){
var current_obj_id = $(this).attr('id');
var current_obj_value = $('#'+ current_obj_id + " option:selected").val();
a[current_obj_id] = current_obj_value;
});
init = false;
}
function hasConflict(input){
var conflict = false;
$(".brand-list").not(input).each(function(i, obj){
if($(this).val()==input.val()){
conflict = true;
return false; //break the loop
}
});
return conflict;
}
$(".brand-list").change(function(){
var $this = $(this); //recycle object
if(hasConflict($this)){
$this.val($this.data('prev'));
alert("Conflict"); //do whatever
}
});
$( ".brand-list" ).on('click focus',function() {
$(this).data('prev',$(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="inputBrand-1" class="brand-list">
<option value="-1">SELECT A BRAND</option>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="inputBrand-2" class="brand-list">
<option value="-1">SELECT A BRAND</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="inputBrand-3" class="brand-list">
<option value="-1">SELECT A BRAND</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
</select>

Rather than annoy user by letting them select something and be told they can't it's better UX to either disable previous selections or remove them completely.
Here's an approach that manages the filtering/removing of other selections
var $selects = $(".brand-list"),
// store a cloned set of all options
$storedOptions = $selects.first().children().clone().removeAttr('selected'),
// whether to always include "SELECT A BRAND"
alwaysShowDefault = true;
$selects.change(function() {
// create array of all the selected values
var allValues = $selects.map(function() {
return $(this).val()
}).get();
// loop through each select to create filtered options
$selects.each(function(i) {
// new set of cloned and filtered options for this select instance
var $opts = $storedOptions.clone().filter(function() {
if(+this.value === -1){
return alwaysShowDefault || +allValues[i] === -1;
}
return allValues[i] === this.value || allValues.indexOf(this.value) === -1;
});
// update filtered options and reset current value
$(this).html($opts).val(allValues[i])
})
// trigger one change on page load to filter what is already selected
}).first().change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="inputBrand-1" class="brand-list">
<option value="-1">SELECT A BRAND</option>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="inputBrand-2" class="brand-list">
<option value="-1">SELECT A BRAND</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="inputBrand-3" class="brand-list">
<option value="-1">SELECT A BRAND</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" >3</option>
<option value="4">4</option>
</select>

Actually you'r currently doing is manually setting the selected attribute on each option element. It is not a good approach because it doesn't remove other attributes of options of the same select element. So use following code in your source.
$(e.currentTarget).val(-1);
Replace following code with above one
$('#'+ current_selected_obj_id + " option[value=" + a[current_selected_obj_id] +"]").attr('selected','selected')

FadeIn fadeOut depending upon the previous option value in select [duplicate]

I have 4 Drop Downs.
Each drop by default has a --select-- option. Each box has a unique id. As you can see, the second drop down is disabled if the above drop down value is --select--. It will only enable when the value is anything but --select--
Here's my code:
$(document).ready(function() {
$('#idOfTheFirstDropDown').bind('change', function() {
var options = $(this).children('option');
var item = $('div.c-select').children().hide(); // hide all the elements
var value = Math.floor(Math.random() * options.length );
//console.log(value);
if (value.length) { // if selected
item.show(); // show the next dropdown
}
}).trigger('change');
});
I want it to show the next dropdown only when my previous drop down value is not --select--. My code is taking in the first drop down but not changing the value. What am I doing wrong? Thanks.
My HTML for one drop down box. Only the ID's change for the remaining 3. Rest of the HTML remains the same.
<div class="c-select">
<select name="list1" onchange="javascript:setTimeout('__doPostBack(\'list1\',\'\')', 0)" id="idOfTheFirstDropDown" class="GroupDD dropDown ">
<option selected="selected" value="">-- Select --</option>
<option value="1">Group1</option>
</select>
</div>

Rather than hiding the options, I would use the disable attribute (comments in code):
var selects = $('.drop-down');
selects.not(':eq(0)').prop('disabled', true); // disable all but first drop down
selects.on('change', function() {
var select = $(this),
currentIndex = selects.index(select),
nextIndex = currentIndex + 1;
// only do this if it is not last select
if (currentIndex != selects.length - 1) {
selects.slice(nextIndex) // get all selects after current one
.val('') // reset value
.prop('disabled', true); // disable
selects.eq(nextIndex).prop('disabled', select.val() === ''); // disable / enable next select based on val
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="drop-down">
<option value="">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<select class="drop-down">
<option value="">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<select class="drop-down">
<option value="">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>
<select class="drop-down">
<option value="">--Select--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

Check this one;
HTML code:
<select id="sel-1"></select>
<select id="sel-2"></select>
<select id="sel-3"></select>
<select id="sel-4"></select>
JS Code:
$(document).ready(function(){
$("[id^=sel]").change(function(){
/*
* find out the current box id
*/
var id=$(this).attr("id");
/*
* find out the current box id order number
*/
var ordernumber=id.split("-")[1];
if($(this).val()!="select")
{
//enable next one
$("#sel-"+(ordernumber+1)).show();
}
})
})

Assuming the option that has '--select--' as text has no value, just use val on the handler to check if the selected option is other than the empty
if(this.val() !== '') {
// enable following select
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
select {
margin: 5px 0;
display: block;
}
</style>
<script>
$(function() {
$('.cls-select').change(function() {
if ($(this).val() == '--select--') {
// reset and disable the next drop downs
$('.cls-select:gt(' + $('.cls-select').index($(this)) + ')').val('--select--').prop('disabled', true)
} else {
// current drop down has value so enable the next drop down
$(this).next().prop('disabled', false);
}
});
})
</script>
<select class="cls-select">
<option>--select--</option>
<option>one</option>
<option>two</option>
</select>
<select class="cls-select" disabled>
<option>--select--</option>
<option>one</option>
<option>two</option>
</select>
<select class="cls-select" disabled>
<option>--select--</option>
<option>one</option>
<option>two</option>
</select>
<select class="cls-select" disabled>
<option>--select--</option>
<option>one</option>
<option>two</option>
</select>

Two things in the form dependent on each other

In my form I have this HTML:
<select name="clientData[first]" >
<option value="0">without</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="text" name="clientData[second]">
And what I have to do is if I have selected without I can type something in the <input>. If I have selected something else then the <input> should be disabled. If I first type something in <input> I disable the <select>
And I don't know how to do that. Can anybody help?

You can hook to the change event of the select and then toggle the input as required. Try this:
$('select').change(function() {
if ($(this).val() == '0') {
$('input').prop('disabled', false);
} else {
$('input').prop('disabled', true).val('');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="clientData[first]">
<option value="0">without</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="text" name="clientData[second]">

This can be done in jQuery
$('select').on('change', function() {
if($('option:selected').text() == 'without') {
$('input').prop('disabled', false);
}
else {
$('input').prop('disabled', true);
}
});
You need to listen for a change on the select tag.
You can use the selected selector to select any element with the selected state. You can then assign properties with prop.
Fiddle
https://jsfiddle.net/tu1au8aw/

$('select').change(function() {
if ($(this).val() == '0') {
$('input').prop('disabled', false);
}
else {
$('input').prop('disabled', true);
}
});
$('input').on('input', function() {
if ($(this).val() == "") {
$('select').prop('disabled', false);
} else {
$('select').prop('disabled', true);
}
});
<select name="clientData[first]">
<option value="0">without</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="text" name="clientData[second]">

jQuery select option last doesn't work

I've got a button and list of options. The idea is that when user clicks the button the default option changes from disabled to max value. And oposite - if the input is not checked, the default is again disabled.
But the value returns undefined. If I change the first and thelast to numeric values, everything works fine. What's wrong?
<input class="input" type="checkbox" value="1" name="select-pot[]">
<select id="select" name="q-count[]">
<option disabled selected> -- choose -- </option>
<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>
</select>
jQuery(function(){
jQuery(".input").click(function(){
var thefirst = jQuery(this).next('#select option:first').val();
var thelast = jQuery(this).next('#select option:last').val();
if( jQuery(this).is(':checked') )
jQuery(this).next('#select').val(thelast);
else
jQuery(this).next('#select').val(thefirst);
});
});

.next() gets the next sibling, so you need to get the select and use .find() or .children() afterwards:
var thefirst = jQuery(this).next('#select').find('option:first').val();
var thelast = jQuery(this).next('#select').find('option:last').val();

Since IDs must be unique, there's no point in doing something like:
jQuery(this).next('#select option:first')
when
jQuery('#select option:first')
would suffice, plus .next() would fail here since it evaluates the siblings of an element and filters on anything you pass, but your filter is what would cause it to not match anything.
Instead, use:
jQuery(".input").click(function () {
var thefirst = jQuery('#select option:first').val();
var thelast = jQuery('#select option:last').val();
if (jQuery(this).is(':checked')) jQuery('#select').val(thelast);
else jQuery('#select').val(thefirst);
});
jsFiddle example

The vanilla javascript alternative for future viewers
(function () {
"use strict";
var inputs = document.getElementsByClassName('input'), input;
for (var i = 0; input = inputs[i]; i++) {
input.addEventListener('click', function (e) {
e.target.nextElementSibling.lastElementChild.selected = e.target.checked;
e.target.nextElementSibling.firstElementChild.selected = !e.target.checked;
}, false);
}
})();
<input class="input" type="checkbox" value="1" name="select-pot[]">
<select id="select" name="q-count[]">
<option disabled selected>-- choose --</option>
<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>
</select>

Categories