Develop Reference

getting the selected options value according to user change

I have this simple select menu and its options:
<select name="selectMenu" id="selectMenu">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I want to get the value from the selected option automatically so I tried this:
let selectMenu = document.getElementById("selectMenu");
let scoreLimit = selectMenu.options[selectMenu.selectedIndex].value;
and with .text instead of .value too, no difference.
and I tried let scoreLimit = selectMenu.value; right away too, no difference
The problem is if you reload the page and the selected option is 1, for example, the variable scoreLimit will always be 1 even if I select a different option afterward from the select menu. I want it to update its value automatically without reloading the page as I select different options, how can I do this? (pure JS only if possible)

It would be best to use a function
const getScoreLimit = () => document.getElementById("selectMenu").options[selectMenu.selectedIndex].value
and call it when you need (just like normal function)
getScoreLimit()

You can create a function and pass that function as callback function of change event of the element like the following way:
let selectMenu = document.getElementById("selectMenu");
function selectValue(el){
let scoreLimit = el.options[el.selectedIndex].value;
console.log(scoreLimit);
}
selectMenu.addEventListener('change', function(){selectValue(this)});
selectValue(selectMenu); // call this for the default value on page load
<select name="selectMenu" id="selectMenu">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Get value of selectbox option without using .change()

I have a selectbox as follows:
<select id="select_search">
<option value="search_contact">Contact</option>
<option value="search_customer">Customer</option>
<option value="search_employee">Employee</option>
<option value="search_servEmp">Service Employee</option>
<option value="search_servOrg">Service Org</option>
</select>
The above selectbox is part of a search form. When you submit the form, using an ajax request the results are returned to same page asynchronously.
On my results page (the one loaded asynchronously), I have a grouping of other select boxes that act as filters for the results.
<select id="select_customer">
<option value="">something</option>
</select>
<select id="select_contact">
<option value="">something else</option>
</select>
etc....
How can I get the value of the original selectbox (#select_search) to show/hide the appropriate selectboxes that were loaded via ajax. (eg. if search_contact was the selected option, only show the select box with id="search_contact")
The only way I'm familiar with is to get the value of the select box on change, but in this case the affected elements will not be loaded until after the change occurs.

You can Try this in jsFiddle .
$(function () {
$(document).on('change', '#select_search', function () {
$('select:not(#select_search)').addClass('invisble');
var selectSearchVal = $(this).find('option:selected').val();
$('#select_' + selectSearchVal.replace('search_', '')).removeClass('invisble');
});
});

If you're using JQuery $(#select_search).val() should do the trick.

The new way to make a $.live
$(document).on('change', '#select_search', function() {
// change
});

How do I determine if different sections of a checkbox dropdown menu are selected?

I have a multiselect dropdown menu where each option has a checkbox and more than one option can be selected at once. I'm using a jQuery multiSelect plugin generate the dropdown.
<select id="types" multiple="multiple" size="5">
<option value="">Show All</option>
#{
<option value="Gains">Gains</option>
<option value="Losses">Losses</option>
<option value="Adjustments">Adjustments</option>
<option value="Future">Future</option>
<option value="Deliveries">Deliveries</option>
<option value="Recoveries">Recoveries</option>
<option value="Full Payout">Full Payout</option>
<option value="Early Payout">Early Payout</option>
<option value="Charge Offs">Charge Offs</option>
<option value="Returns">Returns</option>
<option value="Transfers">Transfers</option>
<option value="Ins. Write-offs">Ins. Write-offs</option>
}
</select>
What I need to be able to do is separate the options into 2 sections. The first 4 in a section and the last 8 in a section. If an option is selected in one section, then any options that are selected in the other section are then unselected. This is already setup in a C# .NET application. I am having to replicate the functionality. I don't have access to the .NET code. At first I thought maybe I could put the different options into separate divs and just check whether an option was selected in each div but I get validation errors when I try to do that. I'm not really sure what else I could try. Any help with this would be great. Thanks.

try using classes, attach a jquery check box click(), check for class if ( $(this).hasClass("checkboxSection1") ) then uncheck all the other ones like so $(".checkboxSection2").prop('checked', false);
so some simple code is
$("myForm :checkbox").click( function(){
$(this).hasClass("checkboxSection1")?
$(".checkboxSection2").prop('checked', false):
$(".checkboxSection1").prop('checked', false);
});

How about giving them a set of classes e.g. 'option1' & 'option2', then you can do a little javascript/jquery to handle the logic of the selection process...

Multiple Dynamically-Added Inputs in HTML Form

I'm trying to add hidden input fields using JavaScript, but I did/have not achieved the desired result.
I want to add hidden fields to a form when a user selects a value from a dropdown list. The number of dropdown lists are not the same in this and other similar pages, there might be more or less than two.
I want to add a number of hidden fields when the user select value from the first dropdown list, and if he selects another value from another dropdown list I want to add additional hidden fields, and to save all the hidden fields' values.
Example:
<select id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
If the user selects "2", I want to add 2 hidden fields:
<select id="s2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
If the user selects "3" in this second list I want to add three additional hidden fields but saving (preserving) the two hidden fields that was already dynamically added using the "s1" earlier.

Honestly, I have no idea what you are asking...but a quick fix could be using proper syntax for HTML.
i.e.
<select id"s2">
Change to
<select id="s2">

jQuery has the very useful change() function. So you might write something like:
$(document).ready(function(){
$("#s1").change(function(){
var field_value = $(this).val();
// then perhaps:
for(i = 0; i < field_value; i++){
}
// or
if(field_value == 2){
// do something
}
});
})
Hope thats of some use. Dukeland has a very good point above as well.

How to fire a change event on a HTMLSelectElement if the new value is the same as the old?

I have the following markup:
<select onchange="jsFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
When a user pulls down the combobox and selects the same option that was previously selected (or doesn't change the selection at all), JavaScript doesn't regard it as an onchange event. So, the jsFunction() is not called. But I want the jsFunction() called even in this case. How can I achieve this?

I'd do it like this:
<select onchange="jsFunction()">
<option value="" disabled selected style="display:none;">Label</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
If you want you could have the same label as the first option, which in this case is 1.
Even better: put a label in there for the choices in the box.

You have to add empty option to solve it,
I also can give you one more solution but its up to you that is fine for you or not Because User select default option after selecting other options than jsFunction will be called twice.
<select onChange="jsFunction()" id="selectOpt">
<option value="1" onclick="jsFunction()">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
function jsFunction(){
var myselect = document.getElementById("selectOpt");
alert(myselect.options[myselect.selectedIndex].value);
}

Just set the selectIndex of the associated <select> tag to -1 as the last step of your processing event.
mySelect = document.getElementById("idlist");
mySelect.selectedIndex = -1;
It works every time, removing the highlight and allowing you to select the same (or different) element again .

Try this. Just add an empty option. This will solve your problem.
<select onchange="jsFunction()">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>​

For this problem, I have finally put a new <i> tag to refresh the select instead. Don't try to trigger an event if the selected option is the same that the one already selected.
If user click on the "refresh" button, I trigger the onchange event of my select with :
const refreshEquipeEl = document.getElementById("refreshEquipe1");
function onClickRefreshEquipe(event){
let event2 = new Event('change');
equipesSelectEl.dispatchEvent(event2);
}
refreshEquipeEl.onclick = onClickRefreshEquipe;
This way, I don't need to try select the same option in my select.

use the "onmouseup" property with each option element. it's verbose, but should work. also, depending on what your function is actually doing, you could arrange things a little differently, assuming the number is important in the handler:
<select>
<option onmouseup="handler()" value="1">1</option> //get selected element in handler
<option onmouseup="handler(2)" value="2">2</option> //explicitly send the value as argument
<option onmouseup="handler(this.value)" value="3">3</option> //same as above, but using the element's value property and allowing for dynamic option value. you could also send "this.innerHTML" or "this.textContent" to the handler, making option value unnecessary
</select>

JavaScript code:
on mousedown event: set selectedIndex property value to -1
on change event: handle event
The only drawback is that when the user clicks on the dropdown list, the currently selected item does not appear selected

It's not firing because the value hasn't "changed". It's the same value. Unfortunately, you can't achieve the desired behaviour using the change event.
You can handle the blur event and do whatever processing you need when the user leaves the select box. That way you can run the code you need even if the user selects the same value.