Develop Reference

AngularJS - How to make select element have an empty option selected by default?

I have a <select> element which is filled by angular, and the options are properly displayed with the data in ctrl.servicios :
<select id="id_select_token" ng-model="ctrl.token" class="form-control input-sm"
ng-selected="ctrl.token == item.Clv_Servicio"
ng-change="ctrl.GetPrecioToken();"
ng-options="item as item.Descripcion for item in ctrl.servicios track by item.Clv_Servicio">
<option value="">Selecciona</option>
</select>
The issue is, I want this select to, by default, have the <option value="">Selecciona</option> selected. I've tried to add selected="selected" to that option, but it doesn't work. I also tried, on javascript, this:
let select_token_input = document.getElementById('id_select_token');
select_token_input.selectedIndex = 0;
But this also doesn't work, is angular overriding it?, how could I best achieve this?

Angularjs, select Box create blank option at first always

I got some problems with selectbox.
In my original code, I receive an object through $http calling, and that is like below.
[
{key:'user_id', value:'ID'},
{key:'user_name', value:'Name'},
{key:'user_gender', value:'Gender'},
{key:'user_phone', value:'Phone'},
{key:'user_email', value:'Email'},
{key:'user_birth', value:'Birthday'},
];
When I tried to put values of this object into option, it made 'blank option' automatically.
To solve this, I saw two posts
Angular JS Remove Blank option from Select Option
Why does AngularJS include an empty option in select?
but any solutions of these could not help me.
How can I fix this?
Here's my fiddle.
Select box create blank option
I'll wait some handsome or pretty developers who will solve my problem. :)

Try This
HTML Code -
<select ng-options="opt as opt.value for opt in searchOpt.option" ng-model="searchOpt.selected">
</select>
The ngOptions attribute can be used to dynamically generate a list of elements for the element using the array or object obtained by evaluating the ngOptions comprehension expression
Working Jsfiddle

<select ng-model="itemSelected">
<option
ng-repeat="item in data" value="{{ item.key }}"
ng-selected="{{item.key === itemSelected}}">
{{ item.value }}
</option>
</select>
https://plnkr.co/edit/QthDhkvku8UvcVHaWcGG?p=preview
Check the code. Use ng-selected in your option for selected first element.

multiselect dropdown sorts based on value present in option tag

I am having a multiselect dropdown whose value are populated based on iteration through for each. However the order I am sending the data is not maintained.
Please suggest what should I do.
<select id="secWhse" path="secondaryWarehouse" multiple="true" style="display: none;"
title="Select the secondary warehouse to which you want to give access to the user.">
<option value="1">Enterprise</option>
<option value="14">enter2</option>
<option value="17">enter3</option>
<option value="19">4thenterprise</option>
</select>
But if I am able to print the value directly, Its printing in my order.
UPDATE: Plugin we are using is: http://wenzhixin.net.cn/p/multiple-select/docs/#multiple-select
CODE:
$('#secWhse').multipleSelect({ filter: true,multiple: true});
JSP code to populate select tag:
${item.value}

Angular Kendo Dropdownlist automatically adds blank option

I am using angular kendo and having a strange issue with kendo's dropdownlist control that the field bound with the first dropdown control on the form has by default ? undefined:undefined ? in it. Although the generated html has selected="selected" in first option. When I explicitly select a value in dropdown the model is updated properly.
The dropdown is filled with an array in root scope.
Also noticed that if I enable chrome's extension AngularJS Batarang then it works as well.
I did debugging of angular-kendo and found out that kendo is automatically adding blank option which has value of ? undefined:undefined ?.
<select class="s-select" kendo-drop-down-list k-data-source="lookupCache.getLookupValues('gender')" k-data-text-field="'DisplayName'" k-data-value-field="'Id'" k-value="'M'" ng-model="Model.Gender" />
where Model is {} by default

For dynamic data source you can use data-option-label, like follows:
<select name="packageName" id="packageName"
kendo-drop-down-list
k-options="dropDownListOptions"
k-ng-model="packageSelected"
ng-model="packageTypeId"
data-option-label="{value:'Select...',name:''}"/>

Its a strange issue in the Kendo UI.
My workaround :
Dont give the kendo-drop-down-list tag in the select list. Rather make it kendo by JS function.
HTML :
<select id="searchisActive" ng-model="ngsearchisActive" ng-change="applyFilter()">
<option value="-1">All</option>
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
JS :
$(function () {
$("#searchisActive").kendoDropDownList();
});

Select options not recognised after adding with Mustache

I have a select list in a page that is initially as follows:
<select id="select-company-type" name="company_type">
<option value="">Company Type</option>
</select>
The options are then repopulated via a Mustache template when another select is changed
<script id="companyTypeOptionsTpl" type="text/template">
<option value="">Company Type</option>
{{#companies}}
<option value="{{title}}">{{title}}</option>
{{/companies}}
</script>
This works fine and the new option items appear in the drop down.
However, if I then try and select one of the options programatically with something like:
$('#select-company-type').val(selectedOption);
where selectedOption contains a string that matches one of the options - it doesn't work.
Also, even if I select an option manually, its value is not passed via GET or POST when the form is submitted.
It's as though the new options are not being recognised although they are visible.
Am I missing a trick here?
Thanks