I have the following HTML/Twig structure
<select name="herstellerSelect" class="categoryElement" id="herstellerDropdown" style="display: block;">
<option class="preselect" value="" style="display: block;">Hersteller wählen</option>
{{ _self.cpitems0(categories.categories, categories.categories_info, parts, oop_display, oop_opened) }}
</select>
The Twig macro "cpitems0" generates elements for the
This is the jQuery Code that should, amongst other things, output a text to the console once children (<option> elements of the <select>) are clicked.
$(document).ready(function() {
console.log('CATEGORY SELECTOR TEST');
$("#herstellerDropdown").children().click(function(e) {
e.preventDefault();
console.log('CATEGORY SELECTOR TEST 2');
...
I have also tried
$(document).ready(function() {
console.log('CATEGORY SELECTOR TEST');
$("#herstellerDropdown").on('click', '> *', function(e) {
e.preventDefault();
console.log('CATEGORY SELECTOR TEST 2');
...
Only Firefox (private mode and cleared browser cache) displays the second console.log output, all the other tested Browsers (Brave, Chromium, Opera Developer in private mode with cleared Browser cache on Ubuntu 20.4) only display the first console.log output
Does anyone know why this happens?
Upate 14.10.2021 14:20 -> I have to use $("#herstellerDropdown").on("change" ... ) instead of .$("#herstellerDropdown").click because it's a element.
Generally, I have to use "AJAX Cascading Dropdowns" for what should be realized. I thought I could avoid AJAX and load the server generated content into the DOM and copy the respective elements with $("selectElement").html( elements) but I guess that results in poor performance and bad design so I have to go with the Cascading Dropdowns!
Use on("change" instead of click
Options do not need ID
Why display:block?
Why preventDefault() ?
This works in Chrom(e/ium) and Fx
$(function() {
$("#herstellerDropdown").on("change", function(e) {
console.log(this.value)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="herstellerSelect" class="categoryElement" id="herstellerDropdown">
<option class="preselect" value="" style="display: block;">Hersteller wählen</option>
<option data-val-one="Key0" data-val-two="" data-val-three="" value="entry0">categories_info[keyZero].elementid 0</option>
<option data-val-one="Key1" data-val-two="" data-val-three="" value="entry1">categories_info[keyZero].elementid 1</option>
<option data-val-one="Key2" data-val-two="" data-val-three="" value="entry2">categories_info[keyZero].elementid 2</option>
</select>
I have the following html code with a multiselect element. On running tests with protractor to select the options, I get the error as 'Element not visible'.
<div id="one" class="class1">
<select id="select1" style="width: 70%;" class="multiselect" multiple="multiple" ng-model="formData.abcqw">
<option value="abc">ABC</option>
<option value="xyz">XYZ</option>
<option value="pqr">PQR</option>
</select>
</div>
protractor code :
browser.actions().
mouseMove(element(by.className("multiselect"))).click().perform();
element(by.model("formData.abcqw")).sendKeys("abc");
Any help is appreciated.
It's pretty much evident from the HTML which you have shared that the <select> tag is an AngularJS element, so we have to induce wait i.e. WebDriverWait as follows for the element to be selectable:
var EC = protractor.ExpectedConditions;
// Waits for the element with id 'select1' to be selected.
browser.wait(EC.elementToBeSelected($('#select1')), 5000);
I also think that it is a wait issue.
Whenever you see this "element not visible error" you can add
browser.sleep(5000);
before the click statement and try again
if that doesn't work try below.
This when we intentionally want to click an hidden element. So this should work
var elm = element(by.className("multiselect "));
browser.executeScript("arguments[0].click();", elm.getWebElement());
browser.sleep(2000);
element(by.model("formData.abcqw")).sendKeys("abc");
Try the following code, I replicated the same in my local and verified the below code it works fine:
var EC = protractor.ExpectedConditions;
var multiSelectElement = element(by.model('formData.abcqw');
browser.wait(EC.visibilityOf(multiSelectElement))).then(function() {
browser.wait(EC.elementToBeClickable(multiSelectElement.element(by.cssContainingText('option', 'ABC'))))).then(function() {
multiSelectElement.element(by.cssContainingText('option', 'ABC')).click();
});
});
In AngularJS page I have a dropdown that lists buildings (facilities):
<select ng-model="selectedFacility"
ng-options="facility.abbr for facility in facilities track by facility.id">
</select>
<label>{{selectedFacility.name}}</label>
Seems to be working. The value in the dropdown shows what user selects (abbreviation), and the text in the label shows corresponding long name. Good.
However, elsewhere I pass $scope.selectedFacility.id to $http call and I noticed that it is always 1, regardless what building is actually selected. I looked deeper (in Chrome F12), and I see that all dropbox items that I selected at some point have selected="selected" attribute:
<option value="1" label="Engineering" selected="selected">Engineering</option>
<option value="2" label="Biology" selected="selected">Biology</option>
<option value="3" label="CompSci">CompSci</option>
<option value="4" label="Admissions" selected="selected">Admissions</option>
<option value="5" label="Security">Security</option>
As is clear from the output above, I selected items 1, 2, and 4 at some point. My guess is that since first item was selected initially, it ends up always having "selected" attribute, and therefore selectedFacility.id=1. But how do I tell Angular to remove selected attribute? It is a regular dropdown, without any way to select multiple items - yet multiple items get marked as selected
UPDATE. It looks like it is important that the controller has the following:
$scope.selectedFacility= {};
$scope.facilities = facility.getFacilities().query(function(facilities) {
$scope.selectedFacility=facilities[0];
});
and facility is provider service that retrieves facility information from the server:
service.getFacilities = function() {
return $resource(url);
};
If I start using $scope.selectedFacility.imeanit=facilities[0]; and selectedFacility.imeanit in ng-model, it works as expected
The Problem
I was able to recreate your issue here.
I setup a watch on $scope.selectedFacility, to see when the model actually updates.
$scope.$watch('selectedFacility', function(newVal, oldVal) {
console.log(newVal);
console.log(oldVal);
});
The watch gets called once at the start:
[Log] null (main.js, line 17)
[Log] null (main.js, line 18)
Then once more inside the query() callback:
[Log] Resource (main.js, line 17)
abbr: "Eng"
id: 1
name: "Engineering"
__proto__: Resource
[Log] null (main.js, line 18)
But then never again, even when changing the selected option in the <select>.
The reason why has to do with how JS prototypal inheritance works, and the implications of that with 2-way bindings & Angular's ability to do dirty-checking when child scopes are involved (which are here, thanks to ng-options). This YouTube video explains it well.
The Fix
If you instead make facilities an object whose members are the list of Resources and the selected Resource, then it will work. Here's another plunker showing a working example (relevant details below):
JS:
$scope.facilities = {
selected: null,
all: []
};
$scope.facilities.all = Facilities.query(function(list) {
$scope.facilities.selected = list[0];
});
HTML:
<select ng-if="facilities.all.length"
ng-model="facilities.selected"
ng-options="facility.abbr for facility in facilities.all track by facility.id">
</select>
<label ng-if="facilities.selected">{{facilities.selected.name}}</label>
(strictly speaking, only the ng-model (i.e. facilities.selected) needs to be a property-of-a-property-of-$scope, but I thought the above structure was cleaner).
I've been working with AngularJS for the last few weeks, and the one thing which is really bothering me is that even after trying all permutations or the configuration defined in the specification at http://docs.angularjs.org/api/ng.directive:select, I still get an empty option as the first child of select element.
Here's the Jade:
select.span9(ng-model='form.type', required, ng-options='option.value as option.name for option in typeOptions');
Here the controller:
$scope.typeOptions = [
{ name: 'Feature', value: 'feature' },
{ name: 'Bug', value: 'bug' },
{ name: 'Enhancement', value: 'enhancement' }
];
Finally, here's the HTML which gets generated:
<select ng-model="form.type" required="required" ng-options="option.value as option.name for option in typeOptions" class="span9 ng-pristine ng-invalid ng-invalid-required">
<option value="?" selected="selected"></option>
<option value="0">Feature</option>
<option value="1">Bug</option>
<option value="2">Enhancement</option>
</select>
What do I need to do to get rid of it?
P.S.: Things work without this as well, but it just looks odd if you use select2 without multiple selection.
The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options. This happens to prevent accidental model selection: AngularJS can see that the initial model is either undefined or not in the set of options and don't want to decide model value on its own.
If you want to get rid of the empty option just select an initial value in your controller, something like:
$scope.form.type = $scope.typeOptions[0].value;
Here is the jsFiddle: http://jsfiddle.net/MTfRD/3/
In short: the empty option means that no valid model is selected (by valid I mean: from the set of options). You need to select a valid model value to get rid of this empty option.
If you want an initial value, see #pkozlowski.opensource's answer, which FYI can also be implemented in the view (rather than in the controller) using ng-init:
<select ng-model="form.type" required="required" ng-init="form.type='bug'"
ng-options="option.value as option.name for option in typeOptions" >
</select>
If you don't want an initial value, "a single hard-coded element, with the value set to an empty string, can be nested into the element. This element will then represent null or "not selected" option":
<select ng-model="form.type" required="required"
ng-options="option.value as option.name for option in typeOptions" >
<option style="display:none" value="">select a type</option>
</select>
Angular < 1.4
For anyone out there that treat "null" as valid value for one of the options (so imagine that "null" is a value of one of the items in typeOptions in example below), I found that simplest way to make sure that automatically added option is hidden is to use ng-if.
<select ng-options="option.value as option.name for option in typeOptions">
<option value="" ng-if="false"></option>
</select>
Why ng-if and not ng-hide? Because you want css selectors that would target first option inside above select to target "real" option, not the one that's hidden. It gets useful when you're using protractor for e2e testing and (for whatever reason) you use by.css() to target select options.
Angular >= 1.4
Due to the refactoring of the select and options directives, using ng-if is no longer a viable option so you gotta turn to ng-show="false" to make it work again.
Maybe useful for someone:
If you want to use plain options instead of ng-options, you could do like below:
<select ng-model="sortorder" ng-init="sortorder='publish_date'">
<option value="publish_date">Ascending</option>
<option value="-publish_date">Descending</option>
</select>
Set the model inline. Use ng-init to get rid of empty option
Something similar was happening to me too and was caused by an upgrade to angular 1.5.ng-init seems to be being parsed for type in newer versions of Angular. In older Angular ng-init="myModelName=600" would map to an option with value "600" i.e. <option value="600">First</option> but in Angular 1.5 it won't find this as it seems to be expecting to find an option with value 600 i.e <option value=600>First</option>. Angular would then insert a random first item:
<option value="? number:600 ?"></option>
Angular < 1.2.x
<select ng-model="myModelName" ng-init="myModelName=600">
<option value="600">First</option>
<option value="700">Second</option>
</select>
Angular > 1.2
<select ng-model="myModelName" ng-init="myModelName='600'">
<option value="600">First</option>
<option value="700">Second</option>
</select>
Among the multitudes of answers here, I figured I'd repost the solution that worked for me and met all of the following conditions:
provided a placeholder/prompt when the ng-model is falsy (e.g. "--select region--" w. value="")
when ng-model value is falsy and user opens the options dropdown, the placeholder is selected (other solutions mentioned here make the first option appear selected which can be misleading)
allow the user to deselect a valid value, essentially selecting the falsy/default value again
code
<select name="market_vertical" ng-model="vc.viewData.market_vertical"
ng-options="opt as (opt | capitalizeFirst) for opt in vc.adminData.regions">
<option ng-selected="true" value="">select a market vertical</option>
</select>
src
original q&a - https://stackoverflow.com/a/32880941/1121919
A quick solution:
select option:empty { display:none }
Hope it helps someone. Ideally, the selected answer should be the approach but if in case that's not possible then should work as a patch.
Yes ng-model will create empty option value, when ng-model property undefined. We can avoid this, if we assign object to ng-model
Example
angular coding
$scope.collections = [
{ name: 'Feature', value: 'feature' },
{ name: 'Bug', value: 'bug' },
{ name: 'Enhancement', value: 'enhancement'}
];
$scope.selectedOption = $scope.collections[0];
<select class='form-control' data-ng-model='selectedOption' data-ng-options='item as item.name for item in collections'></select>
Important Note:
Assign object of array like $scope.collections[0] or $scope.collections[1] to ng-model, dont use object properties. if you are getting select option value from server, using call back function, assign object to ng-model
NOTE from Angular document
Note: ngModel compares by reference, not value. This is important when binding to an array of objects. see an example http://jsfiddle.net/qWzTb/
i have tried lot of times finally i found it.
Though both #pkozlowski.opensource's and #Mark's answers are correct, I'd like to share my slightly modified version where I always select the first item in the list, regardless of its value:
<select ng-options="option.value as option.name for option in typeOptions" ng-init="form.type=typeOptions[0].value">
</select>
I'm using Angular 1.4x and I found this example, so I used ng-init to set the initial value in the select:
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.id for item in items"></select>
I faced the same issue. If you are posting an angular form with normal post then you will face this issue, as angular don't allow you to set values for the options in the way you have used. If you get the value of "form.type" then you will find the right value. You have to post the angular object it self not the form post.
A simple solution is to set an option with a blank value "" I found this eliminates the extra undefined option.
Ok, actually the answer is way simple: when there is a option not recognized by Angular, it includes a dull one.
What you are doing wrong is, when you use ng-options, it reads an object, say [{ id: 10, name: test }, { id: 11, name: test2 }] right?
This is what your model value needs to be to evaluate it as equal, say you want selected value to be 10, you need to set your model to a value like { id: 10, name: test } to select 10, therefore it will NOT create that trash.
Hope it helps everybody to understand, I had a rough time trying :)
This solution works for me:
<select ng-model="mymodel">
<option ng-value="''" style="display:none;" selected>Country</option>
<option value="US">USA</option>
</select>
This worked for me
<select ng-init="basicProfile.casteId" ng-model="basicProfile.casteId" class="form-control">
<option value="0">Select Caste....</option>
<option data-ng-repeat="option in formCastes" value="{{option.id}}">{{option.casteName}}</option>
</select>
This works perfectly fine
<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
<option style="display:none" value=""></option>
</select>
the way it works is, that this gives the first option to be displayed before selecting something and the display:none removes it form the dropdown so if you want you can do
<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
<option style="display:none" value="">select an option...</option>
</select>
and this will give you the select and option before selecting but once selected it will disappear, and it will not show up in the dropdown.
Try this one in your controller, in the same order:
$scope.typeOptions = [
{ name: 'Feature', value: 'feature' },
{ name: 'Bug', value: 'bug' },
{ name: 'Enhancement', value: 'enhancement' }
];
$scope.form.type = $scope.typeOptions[0];
Here is the fix :
for a sample data like :
financeRef.pageCount = [{listCount:10,listName:modelStrings.COMMON_TEN_PAGE},
{listCount:25,listName:modelStrings.COMMON_TWENTYFIVE_PAGE},
{listCount:50,listName:modelStrings.COMMON_FIFTY_PAGE}];
The select option should be like this:-
<select ng-model="financeRef.financeLimit" ng-change="financeRef.updateRecords(1)"
class="perPageCount" ng-show="financeRef.showTable" ng-init="financeRef.financeLimit=10"
ng-options="value.listCount as value.listName for value in financeRef.pageCount"
></select>
The point being when we write value.listCount as value.listName, it automatically populates the text in value.listName but the value of the selected option is value.listCount although the values my show normal 0,1,2 .. and so on !!!
In my case, the financeRef.financeLimit is actually grabbing the value.listCount and I can do my manipulation in the controller dynamically.
I would like to add that if the initial value comes from a binding from some parent element or 1.5 component, make sure that the proper type is passed. If using # in binding, the variable passed will be string and if the options are eg. integers then the empty option will show up.
Either parse properly the value in init, or binding with < and not # (less recommended for performance unless necessary).
Simple solution
<select ng-model='form.type' required><options>
<option ng-repeat="tp in typeOptions" ng-selected="
{{form.type==tp.value?true:false}}" value="{{tp.value}}">{{tp.name}}</option>
A grind solution with jQuery when you haven't the control of the options
html:
<select id="selector" ng-select="selector" data-ng-init=init() >
...
</select>
js:
$scope.init = function () {
jQuery('#selector option:first').remove();
$scope.selector=jQuery('#selector option:first').val();
}
If you use ng-init your model to solve this problem:
<select ng-model="foo" ng-app ng-init="foo='2'">
i had the same problem,
i (removed "ng-model") changed this :
<select ng-model="mapayear" id="mapayear" name="mapayear" style=" display:inline-block !important; max-width: 20%;" class="form-control">
<option id="removable" hidden> Selecione u </option>
<option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>
to this:
<select id="mapayear" name="mapayear" style=" display:inline-block !important; max-width: 20%;" class="form-control">
<option id="removable" hidden> Selecione u </option>
<option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>
now its working, but in my case it was cause ive deleted that scope from ng.controller, check if u didn't do the same.
The only thing worked for me is using track by in ng-options, like this:
<select class="dropdown" ng-model="selectedUserTable" ng-options="option.Id as option.Name for option in userTables track by option.Id">
Refer the example from angularjs documentation how to overcome these issues.
Go to this documentation link here
Find 'Binding select to a non-string value via ngModel parsing / formatting'
There u can see there, directive called 'convertToNumber' solve the issue.
It works for me. Can also see how it works here
We can use CSS to hide the first option , But it wont work in IE 10, 11. The best way is to remove the element using Jquery. This solution works for major browser tested in chrome and IE10 ,11
Also if you are using angular , sometime using setTimeout works
$scope.RemoveFirstOptionElement = function (element) {
setTimeout(function () {
$(element.children()[0]).remove();
}, 0);
};
I'm trying to learn MooTools and am a TOTAL javascript noobie so please be gentle with me.
What I'm tying to do is to change the state of a disabled input field (type is text) when a particular option is selected. The html looks a bit like tis:
<select class="wide" id="selectBox" name="option>
<optgroup label="Common">
<option value="one">One<option>
<option value="two">Two<option>
<option value="three">Three<option>
</optgroup>
<optgroup label="Less Common">
<option value="other">Other<option>
</optgroup>
</select>
<input id="other" type="text" disabled="disabled" />
This is what I was HOPING would give me the value to be checked in an if statement that would then change the input disabled to enabled:
window.addEvent('domready', function(){
$$('#selectBox').addEvent('change',function(){
var selection = $$('#selectBox').getSelected();
alert(selection);
});
});
When the code us run (i.e. I select another value in the option box) all I get is [object HTMLOptionElement].
The documentation on mootools for this method is SPARSE and only says:
Element Method: getSelected
Returns the selected options of a
select element.
Returns:
* (array) An array of the selected elements.
Examples:
HTML
<select id="country-select" name="country">
<option value="US">United States</option
<option value ="IT">Italy</option>
</select>
JavaScript
$('country-select').getSelected(); //Returns whatever the user selected.
Note:
This method returns an array, regardless of the multiple attribute of the select element. If the select is single, it will return an array with only one item.
Totally confusing!
Someone please tell me what I'm missing. I've also tried:
var selection = $$('#selectBox').getSelected().value; //and
var selection = $$('#selectBox').getSelected('value'); //and
//a WHOLE bunch of other wild ideas including
var selection = $$('#selectBox').getSelected();
alert(selection[0]);
Nothing comes out properly. In some cases I get undefined and in other cases I get the same [object HTMLOptionElement].
so many things wrong, not sure where to begin.
$$() is a collection operator (alias for document.getElements() which returns multiples based upon a selector) - not appropriate to use for an id.
you want document.id("idhere") or $("idhere")
for mootools 1.2+
document.id('selectBox').addEvent('change',function() {
alert(this.get("value")); // get value
alert(this.getSelected().get("value")); // gets the option that's selected and then it's value
});
make sure you check your markup - you don't close the options, you have a missing " from name="option> as well.
getSelected is there as a method as some selects use multiple selection so doing selectEl.get("value") will not report anything meaningful. any other case, .get("value") is fine.
check it working:
http://www.jsfiddle.net/dimitar/SmShF/
have fun and read the manual :)
late reply but I was facing the same issue and solved it in this (simple) way in Mootools:
$('selectBox').getSelected().get('text')
So Complex!
You don't need to do such a complex thing, this would suffice:
var selection = document.getElementById("selectBox").value;
alert(selection);
That should get you the selected text.
But if you wanted to use mootools, I guess that this would work (I'm not going to try it)
var selection = $('selectBox').getSelected();
alert(selection[0].value);
Also this has some problems:
<select class="wide" id="selectBox" name="option>
You don't need the name attribute, as it is basically the same as id. Also if you do have both, then they should probably be the same. I.e. id="selectBox" and name="selectBox
Your name tag should be closed.
Also in your sample, you had a lot of <option>...<option> which should be <option>...</option>
All you need to do is:
$('country-select').getSelected().get('value')[0];
Quick, hackish way:
alert($('selectBox').value)
Verbose, recommended way:
var selectBox = document.id('selectBox');
alert(selectBox.get('value'));
.getSelected() returns an array. See the docs: http://mootools.net/docs/core/Element/Element#Element:getSelected .
My Code is :
var $obj=$$('#id').getSelected()[0];
alert( $obj.get('text') );
alert( $obj.get('value') );