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.
Related
I have a select element
<select id='bill_to'>
<option value='a634jhj2'>test#c.com</option>
<option value='agfd4ghj2'>test2#c.com</option>
<option value='asdf634jhj2'>tes3#c.com</option>
<option value='agf2342d4ghj2'>test4#c.com</option>
</select>
If I do
$('#bill_to').find(':selected')
it returns the first option even though it is not selected.
If an option is selected
$('#bill_to').find(':selected')
works as expected and returns the correct option
What am I doing wrong? Is this a bug. This is driving me crazy.
I just want it to return [] if there is nothing selected
If there are no select option with selected attribute, first option will be the selected option by default. You can try adding another option to top that contains default value as follow.
<select id='bill_to'>
<option value='-1'>Select<option>
<option value='a634jhj2'>test#c.com<option>
<option value='agfd4ghj2'>test2#c.com<option>
<option value='asdf634jhj2'>tes3#c.com<option>
<option value='agf2342d4ghj2'>test4#c.com<option>
</select>
If nothing is selected you will get -1 and then you can proceed.
e.g. http://jsfiddle.net/fZv5t/
I have add closing tag of option "", without this I am having an empty option get inserted after each option in the dropdown. Issue can be seen in this Fiddle.
And the working example is on this Fiddle.
Try to add an empty option tag:
<select id='bill_to'>
<option></option>
<option value='a634jhj2'>test#c.com</option>
<option value='agfd4ghj2'>test2#c.com</option>
<option value='asdf634jhj2'>tes3#c.com</option>
<option value='agf2342d4ghj2'>test4#c.com</option>
</select>
Here you will get empty string, like this:
$('#bill_to').find(':selected').val();
If you can't or don't want to add a dummy first <option>, as an alternative you can grab and test the selected attribute of the element returned by :selected, for example:
var selection = $('#bill_to').find(':selected');
var really = (selection.attr('selected') != null);
var selval = really ? selection.val() : ""; /* or null or whatever */
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>
The following multi-select control needs to be used to update a url hash containing a comma-separated list of ids.
<select id="options" multiple>
<option id="1">Option 1</option>
<option id="2">Option 2</option>
<option id="3">Option 3</option>
<option id="4">Option 4</option>
<option id="5">Option 5</option>
<option id="6">Option 6</option>
<option id="7">Option 7</option>
</select>
In the example below, Options 2, 3, and 4 are selected in the multi-select control. Selecting and un-selecting options in the multi-select control should update the url hash accordingly.
http://localhost/index#options=2,3,4
I have created a fiddle with the multi-select control but do not know how best to approach the url hash change. I have tried using an href to change the hash but that is not supported within an option tag, and does not provide the logic needed to update the hashes accordingly.
Fiddle
Please let me know if I provide any additional information.
Part of your issue is that in JSFiddle you won't be able to see the hash.
That said if you listen for changes on the <select> you can concatenate the array of values into a string using join() and then set this as a has using window.location.hash.
You could so something like this (based on #popnoodles code)
$( '#options' ).on( 'change', function() {
window.location.hash = $( this ).val().join( ',' );
});
Working demo
Ok without interfering with any of that plugin code
First you need to address your options
use this: <option value="1">Option 1</option>
not this: <option id="1">Option 1</option>
Then this jQuery will do what you want.
$('#options').on('change', function(){
var val=$(this).val();
if (val) hash=val.join(','); // join fails if .val() is null (nothing selected)
else hash='';
window.location.hash=hash;
});
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);
If I have a block of markup like this:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
the default value will be "volvo" even though there is not a selected="selected" property on any option.
Is there a way to tell if the value is derived through an explicit selected property versus the default implicit value?
If so, what is the necessary Javascript or JQuery code to do that?
var $changed;
$('select').on('change', function(){
$changed = true;
});
if($changed){
//manual selection event
}else{
//nope, it's default
}
Or, just add <option> ---- Choose ---- </option> and avoid that unnecessary code.
You could just check for selected attribute:
if(!$('select').find('option[selected]').length)
alert('default option');
Maybe I didn't get the question but volvo is selected by default because of how HTML works.
You can use Ohgodwhy suggestion for a "blank" option.
Here's a fiddle