We Keep Coding

jQuery reset of select form doesn't work correctly

I have a form with select tags which initially by default are set to an empty option. For them I have also JavaScript, which disables an option if it was already selected previously by the user.
What I want to do is have a reset all button which if the user wants to can reset all the options to default. This part works but if the user has already selected some options and the JavaScript has disabled them they don't reset and are not anymore selectable. See on the JsFiddle.
JsFiddle: https://jsfiddle.net/qgob6k9m/4/
My question is if there is a way to also restart the previously selected options. Restarting the page is not an option because then the form is sent again.
Thank you!
var $selects = $('select');
$selects.on('change', function() {
$("option", $selects).prop("disabled", false);
$selects.each(function() {
var $select = $(this),
$options = $selects.not($select).find('option'),
selectedText = $select.children('option:selected').text();
$options.each(function() {
if ($(this).text() == selectedText) $(this).prop("disabled",
true);
});
});
});
$selects.eq(0).trigger('change');
$("#button").on("click", function() {
$('#select1 option').prop('selected', function() {
return this.defaultSelected;
});
$('#select2 option').prop('selected', function() {
return this.defaultSelected;
});
$('#select3 option').prop('selected', function() {
return this.defaultSelected;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select name="option" id="select1" size="1" required>
<option value="" selected="selected" disabled hidden>Options</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="option" id="select2" size="1" required>
<option value="" selected="selected" disabled hidden>Options</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="option" id="select3" size="1" required>
<option value="" selected="selected" disabled hidden>Options</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input align="middle" id="button" type="button" value="Reset Form">
</form>

I think this will do the trick
$("#button").on("click", function(){
$('#select1 option').prop('selected', function(){
return this.defaultSelected;
}).prop('disabled', false);
$('#select2 option').prop('selected', function(){
return this.defaultSelected;
}).prop('disabled', false);
$('#select3 option').prop('selected', function(){
return this.defaultSelected;
}).prop('disabled', false);
});

You just need to remove the disabled attribut that you set on your option tag
Here is a fiddle of your project with the solution
var $selects = $('select');
$selects.on('change', function() {
$("option", $selects).prop("disabled", false);
$selects.each(function() {
var $select = $(this),
$options = $selects.not($select).find('option'),
selectedText = $select.children('option:selected').text();
$options.each(function() {
if ($(this).text() == selectedText) $(this).prop("disabled",
true);
});
});
});
$selects.eq(0).trigger('change');
$("#button").on("click", function() {
$('#select1 option').prop('selected', function() {
return this.defaultSelected;
});
$('#select1 option').prop('disabled',false) // remove the disabled attribut
$('#select2 option').prop('selected', function() {
return this.defaultSelected;
});
$('#select2 option').prop('disabled',false) // remove the disabled attribut
$('#select3 option').prop('selected', function() {
return this.defaultSelected;
});
$('#select3 option').prop('disabled',false) // remove the disabled attribut
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<select name="option" id="select1" size="1" required>
<option value="" selected="selected" disabled hidden>Options</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="option" id="select2" size="1" required>
<option value="" selected="selected" disabled hidden>Options</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="option" id="select3" size="1" required>
<option value="" selected="selected" disabled hidden>Options</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input align="middle" id="button" type="button" value="Reset Form">
</form>

HTML select tags + JavaScript

I have several select tags. What I want to do is, if in one of them let's say option one is selected, option one to be disabled in the other select. I have to following code snippet, but it seems like nothing works, or I have inserted it wrongly, or there is something that does not match?
var $selects = $('select');
$selects.on('change', function() {
$("option", $selects).prop("disabled", false);
$selects.each(function() {
var $select = $(this),
$options = $selects.not($select).find('option'),
selectedText = $select.children('option:selected').text();
$options.each(function() {
if ($(this).text() == selectedText) $(this).prop("disabled",
true);
});
});
});
$selects.eq(0).trigger('change');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="option" size="1" style="width:80px;" required>
<option value="" selected disabled hidden>Rank</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br />
<select name="option" size="1" style="width:80px;" required>
<option value="" selected disabled hidden>Rank</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Thank you very much in advance!

Use attr function instead of prop function.
$(this).attr("disabled", true);

Select dropdown value by textarea with jQuery

I have textarea (x1_typdv) and I want this:
If I write "3" to textarea, select option with value "3" in dropdown (x1_typdv2). I have this code but it not work, how to do it? Thanks.
$('#x1_typdv').change(function() {
$('#x1_typdv2').val($('#x1_typdv').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="x1_typdv" value="" name="x1_typdv">
<select name="x1_typdv2" id="x1_typdv2">
<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>
EDIT: I tried it again, it works for me if I use just normaln textarea. But I want use it for textarea which is filled by javascript (its calculations form), and here its not work. How to get the same value which is in teaxtarea to dropdown? Thanks.
$x1_typdv = parseFloat($('#x1_field_skrinka option:selected').attr('data-typdv')),
$x1_fieldTypdv.val($x1_typdv);
$x1_fieldTypdv = $('#x1_typdv');

Hi please check below answer its working..
$('#x1_typdv').keyup(function(e) {
if($('#x1_typdv').val()!="" && $("#x1_typdv2 option[value='"+$('#x1_typdv').val()+"']").length > 0)
$('#x1_typdv2').val($('#x1_typdv').val());
else if($('#x1_typdv').val()!="" && e.which != 8)
alert("Value doesnot exists.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="x1_typdv" value="" name="x1_typdv">
<select name="x1_typdv2" id="x1_typdv2">
<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>

Try to use below code
using Javascript:
document.getElementById("x1_typdv2").value = document.document.getElementById("x1_typdv").value;
OR
using jQuery
$('#x1_typdv2 option[value=' + $('#x1_typdv').val() + ']').attr('selected','selected');

You have to add jquery in your page and try this code :
$('#x1_typdv').on('change', function() {
$('#x1_typdv2').val($('#x1_typdv').val());
});

I noticed some browsers don't catch the change until blur
$(document).ready(function(){
$('#x1_typdv').on("keyup", function() {
$('#x1_typdv2').val($('#x1_typdv').val());
});
});
EDIT: I'd also add more solidity
$(document).ready(function(){
$('#x1_typdv').on("keyup", function() {
var value = $('#x1_typdv').val();
value && $('#x1_typdv2').val(value);
});
});
working fiddle ==> https://jsfiddle.net/tonysamperi/aepc4sbj/

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

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>

How can I check if any dropdown in a class is empty?

I have multiple date of birth dropdowns (day, month, year). How can I have a div show if any of them are null?
I've tried something like this
if ($(".MyClass").val() === "") {
$("#showDiv1").show();
} else {
$("#showDiv1").hide();
}
with a div like
<div id="showDiv1">
My Div
</div>
<select>
<option value="">Choose Value..</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select>
<option value="">Choose Value..</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
This only seems to work if it's just one select, rather than multiple selects.
Thanks,
fiddle: https://jsfiddle.net/62a1pdsk/

This would do the trick:
$('.MyClass').change(function() {
$('#showDiv1').toggle(!!$('.MyClass').filter(function() {
return !this.value;
}).length);
});
-jsFiddle-

Try this
$("select").change(function() {
var flag = 0;
$("select").each(function(a, b) {
if ($(this).val() == "") {
flag = 1;
}
flag == 1 ? $("#showDiv1").show() : $("#showDiv1").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showDiv1">
This div is display if any dropdown value is ""
</div>
<select>
<option value="">Choose Value..</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select>
<option value="">Choose Value..</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>

// Add your javascript here
$(function() {
function ValidateSelect() {
var isValid = true;
$(".MyClass").each(function() {
if ($(this).val() === "") {
isValid = false;
}
});
return isValid;
}
$(".MyClass").change(function() {
if (ValidateSelect()) {
$("#showDiv1").hide();
} else {
$("#showDiv1").show();
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="showDiv1">
My Div
</div>
<select class="MyClass">
<option value="">Choose Value..</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="MyClass">
<option value="">Choose Value..</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</body>
$(function() {
function ValidateSelect() {
var isValid = true;
$(".MyClass").each(function() {
if ($(this).val() === "") {
isValid = false;
}
});
return isValid;
}
debugger;
$(".MyClass").change(function() {
if (ValidateSelect()) {
$("#showDiv1").hide();
} else {
$("#showDiv1").show();
}
})
});

You need to filter out all elements that do not have value and then use the count of returned element as condition to show hide div:
var unselectedmyclass = $(".MyClass").filter(function(){return $(this).val() == ""});
if ( unselectedmyclass.length) {
$("#showDiv1").show();
}else{
$("#showDiv1").hide();
}
Working Demo

Try this
$("select").on("change",function(){
var a = $("select:first").val();
var b =$("select:last").val();
if(a=="" || b=="" )
$("#showDiv1").show();
else
$("#showDiv1").hide();
});
https://jsfiddle.net/62a1pdsk/

Try this:
$(".myclass").change(function() {
if($(".myclass").val()===""){
$("#showDiv1").show();
} else {
$("#showDiv1").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showDiv1">
My Div
</div>
<select class="myclass">
<option value="">Choose Value..</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="myclass">
<option value="">Choose Value..</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>