Develop Reference

.change() adds two values at the same time

Good day,
In my code, I need to use a drop-down list that has two values, say 1 and 2. When I click the #action-link link I append the corresponding text of the value into a textarea (#main-reply). I use Jquery .change() method to determine when selected value changed. Works ok unless I switch options several times and then it starts to add multiple values at a time even though I need insert in textarea only the corresponding value.
Here is a simple snippet of the code I use:
$("#action-link").click(function() {
if ($("#option").val() == 1) {
$("#main-reply").append("One");
}
});
$("#option").change(function() {
if ($(this).val() == 2) {
$("#action-link").click(function() {
$("#main-reply").append("Two");
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="option"><option value='1' selected>One</option><option value='2'>Two</option></select>
Add Value to textarea
<br>
<textarea id="main-reply"></textarea>
How can I solve this? Thanks!

Code adds another on-click listener when the value of the option was changed to '2' Link. Therefore the append() statament was being called multiple times, one from each listener.
$("#action-link").click(function() {
var option = $("#option").val();
if (option == 1) $("#main-reply").append("One");
else if(option == 2) $("#main-reply").append("Two");
});

Most of the times, this issue occurs when you load the same js file twice.
When JS file gets loaded twice, 2 on change events will get attached to the same event. Hence the actions will happen twice
Check your code and make sure that the JS file is not loaded twice
If it's not loaded twice and somehow this issue is still occurring, then use below code
$("#option").off().on("change",function() {
if ($(this).val() == 2) {
$("#action-link").click(function() {
$("#main-reply").append("Two");
});
}
});
This will remove any events attached to the change event and then adds the function

In your code click event is added on every change event for option value 2, which is not a good way as well.
You can write code as below
$("#action-link").click(function() {
if ($("#option").val() == 1) {
$("#main-reply").append("One");
} else if ($("#option").val() == 2) {
$("#main-reply").append("Two");
}
});
$("#option").change(function() {
// Just trigger click on change which handle other stuff
$("#action-link").trigger("click);
// You can write use below code as well.
// $("#action-link").click();
});
OR you can make it very simple as below which is dynamic regardless of any option value which will adds selected option value.
$("#action-link").click(function() {
appendOptionValue($("#option").val());
});
$("#option").change(function() {
appendOptionValue($("#option").val());
});
function appendOptionValue(optionValue){
$("#main-reply").append(optionValue);
}

this is it :
var val = $("#option").val();
$("#action-link").click(function() {
$("#main-reply").append(val);
});
$("#option").change(function() {
val = $(this).val();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="option">
<option value='One' selected>One</option>
<option value='Two'>Two</option>
</select>
Add Value to textarea
<br>
<textarea id="main-reply"></textarea>

this might helpful to you. Use text() instead of append
$(document).ready(function(){
$('#action-link').click(function(event) {
if($('#option').val()==1){
$('#main-reply').text('one');
}else{
$('#main-reply').text('two');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="option"><option value='1' selected>One</option><option value='2'>Two</option></select>
Add Value to textarea
<br>
<textarea id="main-reply"></textarea>

Checking value of an html select with jQuery

I have the following select box:
<select id="choose">
<option value=1>A</option>
<option value=2>B</option>
<option value=3>C</option>
</select>
<div id="hide-me">hide me!</div>
How can I hide an element when I select option "B"? I tried this:
<script type="text/javascript">
if ("#chose option:selected").val(2) {
$("#hide-me").hide();
};
</script>
I think I'm close, but nothing happens when I select option "B". Anyone have any suggestions?

You need to attach change event to select element to detect the option change. then use .toggle() with argument value not equal to 2 for making show/hide decision :
$('#choose').change(function(){
$("#hide-me").toggle($(this).val() != "2");
})
Working Demo

Listen to the change event of the #choose element, and add your conditional logic there.
Example Here
$('#choose').on('change', function () {
if (this.value === "2") {
$("#hide-me").hide();
} else {
$("#hide-me").show();
}
});
..equivalent, but perhaps less readable version:
Example Here
$('#choose').on('change', function () {
$("#hide-me").toggle(this.value !== "2");
});
As a side note, the value of the selected option is a string.
If you wanted to, you could also convert it to a number:
if (parseInt(this.value, 10) === 2) { ... }
or you could use == rather than ===: (not suggested, though. This could lead to logical errors.)
if (this.value == 2) { ... }
Without jQuery:
Example Here
document.querySelector('#choose').addEventListener('change', function () {
var element = document.getElementById('hide-me');
if (this.value === "2") {
element.style.display = 'none';
} else {
element.style.display = 'block';
}
});

The problem with your code is that:
It is not syntactilally correct — ("#chose option:selected").val(2) is an expression, which in turn should be wrapped in parentheses to be a proper condition for if, like this:
if (("#chose option:selected").val(2)) {
However, even after that your code is not correct because you're not actually using jQuery. You're calling method .val() just on a string "#chose option:selected", whereas that string should instead be a jQuery selector passed to jQuery itself:
if ($("#chose option:selected").val(2)) { // $ is the jQuery object that does all the work
However2, even that is incorrect, because you'd just be checking the value of an element right away. What you need is to wait for an element to be changed. Other answers explain very well how to do that.

Accessing $(this).next and slideDown

When choosing the option initials? Yes the Textarea.someClass should slide down and show itself. I have to use $(this) because there will be several of these select options and text areas on the page.
I've tried numerous variations of the code below, including using sibling() but it is not working.
<select class="initials">
<option value="no">Initials? No</option>
<option value="yes">Initials? Yes</option>
</select><br/>
<textarea class="someClass">Put instructions here </textarea>
<script type="text/javascript">
$('select.initials').change(function(){
theVal = $(this).val();
// alert(theVal); WORKING
if(theVal == 'yes') {
$(this).next('textarea.someClass').slideDown();
})
</script>

You have a br in between, so your next() doesn't pick the textarea that is next to the br. so try:
$(this).next().next('textarea.someClass').slideDown(); //
or use the below so that it doesn't what ever number of elements comes in between.
$(this).nextUntil('textarea.someClass').next().slideDown();
Or just give your textarea a display:block.
.someClass{
display:block;
}
and hide the textarea startup and remove the br in between.
Also you forgot a closing brace in your script.
$('select.initials').change(function(){
theVal = $(this).val();
// alert(theVal); WORKING
if(theVal == 'yes') {
$(this).next('textarea.someClass').slideDown();
} //<--- Here
});
You can also simply the script if you are trying to toggle to:
$(this).next('textarea.someClass').slideToggle(this.value === "Yes");
Demo

fiddle Demo
$('select.initials').change(function () {
theVal = $(this).val();
// alert(theVal); WORKING
if (theVal == 'yes') {
$(this).next().next('textarea.someClass').hide().slideDown();
}
});
Use
$(this).next().next('textarea.someClass')
and you are not closing your .change event properly you have typos there

Showing a conditional form field on load, and when preselected

I have the following jQuery code for showing/hiding a conditional form field (contained within tr#other-employer). This works fine, once the page is loaded and options are changed.
I would like make it so that the conditinal field shows when the page is loaded and the option selected in the drop-down list with #employer is pre-selected (this is done with PHP).
I have tried removing $('tr#other-employer').hide(); , but then this showed the conditional field on load regardless if the drop-down field is other or not.
A simple sample page is here: http://brenda.upreach.org.uk/beta/form.php
$(document).ready(function () {
$('tr#other-employer').hide();
$('#employer').change(function () {
if ($(this).val() == "Other") {
$('tr#other-employer').fadeIn();
} else {
$('tr#other-employer').hide();
}
});
});
Any help greatly appreciated!

You can add an if condition like below to check the status of the select box and do the needful.
$(document).ready(function () {
$('tr#other-employer').hide();
/*********************************/
if($("select#employer").val() == "Other")
{ $('tr#other-employer').fadeIn(); }
/*********************************/
$('#employer').change(function () {
if ($(this).val() == "Other") {
$('tr#other-employer').fadeIn();
} else {
$('tr#other-employer').hide();
}
});
});
you can also set the select box default option from jquery using
$("select#employer").val("Other");

I'm not sure I totally understand the question, but if you're looking for the same functionality this code provides, but without the action being a requirement, then just remove the .change() function, and swap out the this for the id:
$(document).ready(function () {
$('tr#other-employer').hide();
if ($('#employer').val() == "Other") {
$('#other-employer').fadeIn();
}
});
Edit:
The above should work, given the following HTML (I've removed the table code from both to simplify the explanation):
<form>
<select id="#employer">
<option value="Foo">Foo</option>
<option value="Other" selected="selected">Other</option>
</select>
<select id="#other-employer">
<option value="Foo">Bar</option>
</select>
</form>
Given the above code the #other-employer dropdown will display only if the 'Other' option is preselected on load.

jQuery prevent change for select

I want to prevent a select box from being changed if a certain condition applies. Doing this doesn't seem to work:
$('#my_select').bind('change', function(ev) {
if(my_condition)
{
ev.preventDefault();
return false;
}
});
I'm guessing this is because by this point the selected option has already changed.
What are other ways of doing this?

Try this:
http://jsfiddle.net/qk2Pc/
var my_condition = true;
var lastSel = $("#my_select option:selected");
$("#my_select").change(function(){
if(my_condition)
{
lastSel.prop("selected", true);
}
});
$("#my_select").click(function(){
lastSel = $("#my_select option:selected");
});

In the event someone needs a generic version of mattsven's answer (as I did), here it is:
$('select').each(function() {
$(this).data('lastSelected', $(this).find('option:selected'));
});
$('select').change(function() {
if(my_condition) {
$(this).data('lastSelected').attr('selected', true);
}
});
$('select').click(function() {
$(this).data('lastSelected', $(this).find('option:selected'));
});

If you simply want to prevent interaction with the select altogether when my_condition is true, you could always just capture the mousedown event and do your event prevent there:
var my_condition = true;
$("#my_select").mousedown(function(e){
if(my_condition)
{
e.preventDefault();
alert("Because my_condition is true, you cannot make this change.");
}
});
This will prevent any change event from ever occurring while my_condition is true.

Another option to consider is disabling it when you do not want it to be able to be changed and enabling it:
//When select should be disabled:
{
$('#my_select').attr('disabled', 'disabled');
}
//When select should not be disabled
{
$('#my_select').removeAttr('disabled');
}
Update since your comment (if I understand the functionality you want):
$("#dropdown").change(function()
{
var answer = confirm("Are you sure you want to change your selection?")
{
if(answer)
{
//Update dropdown (Perform update logic)
}
else
{
//Allow Change (Do nothing - allow change)
}
}
});
Demo

None of the answers worked well for me. The easy solution in my case was:
$("#selectToNotAllow").focus(function(e) {
$("#someOtherTextfield").focus();
});
This accomplishes clicking or tabbing to the select drop down and simply moves the focus to a different field (a nearby text input that was set to readonly) when attempting to focus on the select. May sound like silly trickery, but very effective.

You can do this without jquery...
<select onchange="event.target.selectedIndex = 0">
...
</select>
or you can do a function to check your condition
<select onchange="check(event)">
...
</select>
<script>
function check(e){
if (my_condition){
event.target.selectedIndex = 0;
}
}
</script>

I was looking for "javascript prevent select change" on Google and this question comes at first result. At the end my solution was:
const $select = document.querySelector("#your_select_id");
let lastSelectedIndex = $select.selectedIndex;
// We save the last selected index on click
$select.addEventListener("click", function () {
lastSelectedIndex = $select.selectedIndex;
});
// And then, in the change, we select it if the user does not confirm
$select.addEventListener("change", function (e) {
if (!confirm("Some question or action")) {
$select.selectedIndex = lastSelectedIndex;
return;
}
// Here do whatever you want; the user has clicked "Yes" on the confirm
// ...
});
I hope it helps to someone who is looking for this and does not have jQuery :)

You might need to use the ".live" option in jQuery since the behavior will be evaluated in real-time based on the condition you've set.
$('#my_select').live('change', function(ev) {
if(my_condition)
{
ev.preventDefault();
return false;
}
});

Implement custom readonly like eventHandler
<select id='country' data-changeable=false>
<option selected value="INDIA">India</option>
<option value="USA">United States</option>
<option value="UK">United Kingdom</option>
</select>
<script>
var lastSelected = $("#country option:selected");
$("#country").on("change", function() {
if(!$(this).data(changeable)) {
lastSelected.attr("selected", true);
}
});
$("#country").on("click", function() {
lastSelected = $("#country option:selected");
});
</script>
Demo : https://jsfiddle.net/0mvajuay/8/

This was the ONLY thing that worked for me (on Chrome Version 54.0.2840.27):
$('select').each(function() {
$(this).data('lastSelectedIndex', this.selectedIndex);
});
$('select').click(function() {
$(this).data('lastSelectedIndex', this.selectedIndex);
});
$('select[class*="select-with-confirm"]').change(function() {
if (!confirm("Do you really want to change?")) {
this.selectedIndex = $(this).data('lastSelectedIndex');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='fruits' class="select-with-confirm">
<option selected value="apples">Apples</option>
<option value="bananas">Bananas</option>
<option value="melons">Melons</option>
</select>
<select id='people'>
<option selected value="john">John</option>
<option value="jack">Jack</option>
<option value="jane">Jane</option>
</select>

This worked for me, no need to keep a lastSelected if you know the optionIndex to select.
var optionIndex = ...
$(this)[0].options[optionIndex].selected = true;

$('#my_select').bind('mousedown', function (event) {
event.preventDefault();
event.stopImmediatePropagation();
});

if anybody still interested, this solved the problem, using jQuery 3.3.1
jQuery('.class').each(function(i,v){
jQuery(v).data('lastSelected', jQuery(v).find('option:selected').val());
jQuery(v).on('change', function(){
if(!confirm('Are you sure?'))
{
var self = jQuery(this);
jQuery(this).find('option').each(function(key, value){
if(parseInt(jQuery(value).val()) === parseInt(self.data('lastSelected')))
{
jQuery(this).prop('selected', 'selected');
}
});
}
jQuery(v).data('lastSelected', jQuery(v).find('option:selected').val());
});
});

None of the other answers worked for me, here is what eventually did.
I had to track the previous selected value of the select element and store it in the data-* attribute. Then I had to use the val() method for the select box that JQuery provides. Also, I had to make sure I was using the value attribute in my options when I populated the select box.
<body>
<select id="sel">
<option value="Apple">Apple</option> <!-- Must use the value attribute on the options in order for this to work. -->
<option value="Bannana">Bannana</option>
<option value="Cherry">Cherry</option>
</select>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.js" type="text/javascript" language="javascript"></script>
<script>
$(document).ready()
{
//
// Register the necessary events.
$("#sel").on("click", sel_TrackLastChange);
$("#sel").on("keydown", sel_TrackLastChange);
$("#sel").on("change", sel_Change);
$("#sel").data("lastSelected", $("#sel").val());
}
//
// Track the previously selected value when the user either clicks on or uses the keyboard to change
// the option in the select box. Store it in the select box's data-* attribute.
function sel_TrackLastChange()
{
$("#sel").data("lastSelected", $("#sel").val());
}
//
// When the option changes on the select box, ask the user if they want to change it.
function sel_Change()
{
if(!confirm("Are you sure?"))
{
//
// If the user does not want to change the selection then use JQuery's .val() method to change
// the selection back to what it was previously.
$("#sel").val($("#sel").data("lastSelected"));
}
}
</script>
I hope this can help someone else who has the same problem as I did.