We Keep Coding

Javascript/jQuery Dropdown menu update

I have two dropdown menus - when I select an option on the first I want the other to change to its corresponding option based on its matching value. I am currently using this JS code:
document.getElementById("select_1").onchange = function() {
console.log("select_1", this.options[this.selectedIndex]);
document.getElementById("select_75").value = this.options[this.selectedIndex].getAttribute("value");
};
However the end result does not change/update correctly unless I change manually the second (select_75) dropdown to another option and then back to the changed option (set by select_1).
Are there any changes I could make to the code or other setup entirely to try out in order make this happen? Open to using jQuery as well.

Objects that are "unhidden" after checking a box don't go away when a different box is checked

So here's the code I'm using to make it so any checkbox of a certain class can only have one option selected among the others with the same class.
$(function() {
$(".single-checkbox1").on("click", function() {
$(".single-checkbox1").not(this).prop("checked", false);
});
});
Except, some of these checkboxes show objects when checked, like a text box or text area. The issue is that, unless you manually uncheck the box that shows the object before checking a different box, the object doesn't go away.
For example, if I checked box 1 to reveal textbox 1, then checked box 2 (the page then unchecks box 1 as only one box is allowed to be checked,) the textbox 1 will not disappear.
However, if I manually uncheck box 1 before checking box 2, textbox 1 WILL disappear. Has anyone encountered this error before?

Why don't you use radio buttons instead? Radio buttons in a group only allow one button to be checked at a time. You can do a change event or .each on the group and based on the checked property, you can hide or show the appropriate check boxes.

How do you show/hide the objects when a checkbox is (un)checked? Is it in another on click handler?
If so, I think $(".single-checkbox1").prop("checked", false) only unchecks the checkbox but doesn't call its handler (so the object will not show/hide). It may be better to do something like:
$(".single-checkbox1").on("click", function() {
$(".single-checkbox1:checked").not(this).click();
// If it's a different handler, do
// $(".single-checkbox1:checked").not(this).trigger('whateverHandler');
// If this doesn't uncheck the box then do this instead
// $(".single-checkbox1:checked").not(this).prop("checked", false).click();
});
Create a plunker or snippet if none of this helps and we can try other solutions.

Jquery: Change select box value and and activate a click state

So whats going on is that I have a site that I have taken on for my work. I have two select boxes I am tying into. The problem is when you click the second select box and choose an option it uses ajax to load a second box next to it (a hierarchical select box). The code that I am using is simple and changes the value of the second box back to the "select" option state when the first box is changed. But what it is not doing is creating click state (sorry if I am saying that wrong) but in order for ajax to bring in and remove the third select box the second select box option needs to be clicked.
Is there a way for me to re-create a "click" of the select box.
Here is the jquery:
$(".state.form-select").change(function() {
$('.hierarchical-select .form-select').val('select');
});
Here is a sample fiddle. See this Fiddle

I am not entirely sure, what exactly you are looking for but I feel that this should do the trick:
https://jsfiddle.net/vuvckm3u/5/
$(".state.form-select").change(function() {
$('.hierarchical-select .form-select option:first-child').attr('selected', true);
});

jQuery .prop("disabled",true) not working

I have a dropdown that loads the data and there is a Add button and when the add button is being triggered it will be disabled. It works in the first load, but when the dropdown is onchange the disabled button will be false or not disabled. So how can I still disable the button when the dropdown is being changed. I have also a input field to store the values of the button that has been clicked. Check http://jsfiddle.net/leonardeveloper/qy9u5/.

Problem is, you are appending a new element every time your <select> is changed. You need to be showing and hiding the same respective table each time. You can use jQuery to create those tables using the <option>s. Like so:
$("#loads option").each(function(){
thisNumber = this.value;
$("#displays").append("<table data-table="+thisNumber+"><tr><td>"+thisNumber+"</td><td>"+thisNumber+"</td><td><button class='materialId' value='"+thisNumber+"'>Add</button></td></tr></table>");
$("#displays table").hide();
});
We append the tables (2 in this case) to #displays, and then hide them. When we change the <select> now, we hide all tables, and show the one we selected, I've used data-table for this but there are many ways to target your specific table.
$(document).on("change","#loads", function(){
$("#displays table").hide();
$("#displays table[data-table="+this.value+"]").show();
});
JSFiddle

Try to bind click event also.
Demo
$(document).on("change click","#loads",...

jQuery Chosen plugin - first option doesn't trigger change event?

So I'm using the pretty nice jQuery plugin, Chosen; http://harvesthq.github.com/chosen/
What I'm doing is actually working with TWO Chosen style dropdowns in an 'either/or' fashion, ie the user needs to select an option from one OR the other.
So when the user selects one of the dropdowns, the other one (via javascript) gets set back to its default disabled value.
Both dropdowns are backed by ONE hidden parameter to actually hold the selected value, no matter which dropdown it came from. This is populated by having listeners on both dropdown's on the .chosen().change() event.
The only problem is, it doesn't appear to fire a "change" event when the user selects one of the first options in either dropdown, I guess as this appears to be the already selected option and is therefore not a "change". But both dropdowns actual first option (ie in the jsp) is a disabled option with the normal "Please select" text.
Is there a way to fire the change event even if the option selected was already selected? Or is there just a "select" event that fires even if there hasn't been a change?

you can use .trigger("change"), or .change() on your jquery object to manually trigger the change event.

This worked for me:
//Get the dynamic id given to your select by Chosen
var selId = $('your_select').attr('id');
//Use that id to remove the dynamically created div (the foe select box Chosen creates)
$('#'+ selId +'_chzn').remove();
//Change the value of your select, trigger the change event, remove the chzn-done class, and restart chosen for that select
$('#'+selId).val('your_new_value').change().removeClass('chzn-done').chosen();
In a nutshell you are hard reseting chosen for your select. There might be an easier way than this, but this worked for me.

I just had the same problem using Select2 plugin (remake of Chosen plugin).
I forgot the line "allowClear: true" when I 've declared the Combobox as a select2 one.
$('#selectLabelMap').select2({
placeholder: "Sélectionner un label",
allowClear: true // <= don't forget "allowClear: true (re-init the comboBox)
}

Trigger the change first time when (DOM) is ready.
jQuery(function ($) {
$('#myselect').trigger("change");
});