Develop Reference

How do I get the current option values into an array?

Suppose I have a list:
<select>
<option value="Horse">Horse</option>
<option value="Bird">Bird</option>
<option value="Dogs">Dogs</option>
<option value="Cats">Cats</option>
</select>
I know how to grab the values of each option by looping through. My problem is I have code that changes the default values to something if certain conditions are met but if the conditions are not met I need to revert back to the DEFAULT values. I need to get the default values into an array so I can use them to revert back if the conditions are not met...etc. I need pure javascript no frameworks.
So for example if I change <option value="Horse">Horse</option>to <option value="Train">Train</option>I need to be able to store <option value="Horse">Horse</option> BEFORE it gets changed the same way you can get the default value for an input field to revert back to it if needed.

Use following code:
var options = document.querySelectorAll("option");
var optionsArray = Array.prototype.map.call(options, function(x) {
return x.value;
});
<select>
<option value="Horse">Horse</option>
<option value="Bird">Bird</option>
<option value="Dogs">Dogs</option>
<option value="Cats">Cats</option>
</select>

I figured out the solution and that is to get the values on page load and make sure your script is before the closing body tag.

how can i call select box on change while changing select value using jquery?

I am having a select box like this
<select class="cars" onChange="carName()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
If am changing dropdown values carName function is calling and working as expected. If suppose I change the value using jQuery like this
$('.cars').val('Audi');
I want that carName() function to be called.How can I do this?

You need to .trigger() event programmatically
Execute all handlers and behaviors attached to the matched elements for the given event type.
Also, value is case sensitive, so use correct value. use audi instead of Audi
Code,
$('.cars').val('audi').trigger('change');
Also since you are using jquery bind event using it like
$('.cars').on('change', carName); //Or, $('.cars').change(carName);
function carName() {
alert('In carName function');
}
$(document).ready(function() {
$('.cars').val('audi').trigger('change');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="cars" onChange="carName()">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

I think you might want to add .change()
$('#cars').change(function() {
carName();
});

Set default value in select when the ng-model is null

I'm new to angular and i'm trying to set a default state to select when my ng-model is null. Basically I want to set it to 'None' if the model is empty. I tried the below code but it's not working.
<select ng-init="item.carType | item.carType='none'" ng-model="item.carType">
<option value="none">None</option>
<option value="manual">Manual</option>
<option value="auto">Auto</option>
</select>

Try this:
<select ng-init="item.carType = item.carType || 'none'" ng-model="item.carType">
<option value="none">None</option>
<option value="manual">Manual</option>
<option value="auto">Auto</option>
</select>
That said, per the docs, this is probably a misuse of ngInit. The proper way to do this would be to initialize your model with sane values in the controller (or service, if that's where it came from).

H i ,
My thoughts are it is best to do this in the app rather than the template.
if(typeof $scope.item.carType==="undefined") {
$scope.item.carType="none";
}
or simply setting the value
$scope.item.carType="none";
before it is updated with whatever you are using to set the value : -
$scope.item.carType="none";
$scope.item.carType=someasyncfunctionthatmighttakeawhileandthetemplateisrenderedbeforeitarrives();

You can solve using a value in ng-init
<select ng-init="item.carType='none'" ng-model="item.carType">
<option value="none">None</option>
<option value="manual">Manual</option>
<option value="auto">Auto</option>
</select>

What I would suggest you to do is this.
Make a function in your controller and check if $scope.item.carType == undefined assign a default value.
$scope.setDefaultValueForCarType = function () {
if($scope.item.carType == undefined) {
$scope.item.carType = "none";
}
}
This will work too.
<select ng-init="item.carType='none'" ng-model="item.carType">

Often happens that your ng-model="item.carType" doesn't match any of the select option keys because of the wrong case.
For example: item.cartType is "Manual" but in the options you have an option <option value="manual">Manual</option> in this case it won't work and in the console output you'll see something like this: <option value="? string:Manual ?"></option>
So, either correct your data model or your select option value:
<option value="Manual">Manual</option>

What you are looking for is undefined.
If the value is undefined do you need a value to go to the database when 'none' is selected?
If sending an empty is acceptable you may consider the following:
<select ng-model="item.carType">
<option value="">None</option>
<option value="manual">Manual</option>
<option value="auto">Auto</option>
</select>
Fiddle
This allows you to pass in a value as well and use the same form for edits and new records.

Based on Rob Sedgwick idea, in a pinch deadline I'm not using $scope so with controller as syntax.
loadStates(); //this calls my function for my code
// this is based on what Rob S. is doing with $scope
if(typeof vm.scriptQuestion.statecode ==="undefined") {
console.log('in');
vm.scriptQuestion.statecode = "AA"; // "AA" happens to be the value of the default name for All of my States that is then displaying "ALL" now when before it was blank
}
Here is my Select ( yes, this is a garbage way of doing angular select boxes as ng-repeat is very limited for a select )
<select id="States" ng-model="vm.scriptQuestion.statecode">
<option ng-repeat="state in vm.states" value="{{state.StateCode}}">{{state.StateName}}</option>
</select>

I've made the following changes to your code and it should work now. I've removed the second part in ng-init="" and set the None option value to undefined.
<select ng-init="item.carType='none'" ng-model="item.carType">
<option value=undefined>None</option>
<option value="manual">Manual</option>
<option value="auto">Auto</option>
</select>

Modify selected property in select option

I'm building a select with several options from my php script using pattemplate.
But no matter what I do, the selected option shows in the dom tree like this:
<select id="academicYear">
<option value="1516">2015-2016</option>
<option value="1415">2014-2015</option>
<option selected="" value="1314">2013-2014</option>
<option value="1213">2012-2013</option>
</select>
Is there any way using dom - javascript - jquery to turn:
<option selected="" value="1314">2013-2014</option>
Into:
<option selected value="1314">2013-2014</option>
?
The reason why I need the change: with selected="" I don't get any selection when my select shows in the dialog window where I present it. When I turn it into just select with Firebug and Chrome debug bar the selection works.
Thans a ton!

You can use the id for faster and safer selector:
$('#academicYear option[value="1314"]').prop('selected', true);
The right html sintaxis is:
<option selected="selected" value="1314">2013-2014</option>

I believe setting the value of select will alter that property correctly for you. Otherwise if you still need to change the selected property...
$('option[value="1314"]').prop('selected', true);

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.