Develop Reference

Is there a way to make a multi select dropdown look like a normal dropdown

I want to make my dropdown to support multi-select feature. But from display purpose, I want to modify it. It should be visible to end user as a normal dropwn.
<select type="text" className="form-control" name="filterOptions" id="filterOptions"
onChange={(e)=> {self.optionsChange(e, item)}} style={{marginTop:"0px"}} multiple>
<option key="select" value="allValues">All Values</option>
{self.renderFilterOptions(item)}
</select>
This is my code for dropdown. Is it possible with some css or little bit modification, that the static value "All Values", will appear at the top of the dropdown, clicking on which will show other options, with the ability of multi select.
Or if not possible, then is there a way to add checkbox to a normal dropdown. Checkbox should be added to all the options. This will also help me..
Please guide me. Thanks in advance...

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.

HTML select using ng-options with multiple "default" options

I am currently trying to make a drop down menu that runs off of a model but also has two "default" options that are at the top. Currently I have the following:
<select class="category-selector" chosen
inherit-select-classes="true"
ng-if="auction.category_options.length > 1"
ng-model="auction.active_category"
ng-options="g.label group by g.main_category for g in auction.category_options"
ng-change="auction.active_category == null ? auction.clear_keyword_matching() : auction.refresh_matching_items()">
<option value="" selected>Active items ({{auction.category_counts['Active'].total}})</option>
<option value="all">All items ({{auction.category_counts['All'].total}})</option>
</select>
I am having trouble getting the "All items" option so show up in the dropdown. Is it not possible to declare two options and populate the rest using the ng-options / model?
Image of dropdown

Adding extra option tags only works if you set value="" for the additional options
<option value="" selected>...</option>
As soon as the value isn't empty, it will not show, as explain here. So you will probably need build this using ng-repeat.
In this answer, there is a solution using a directive, maybe that could work.

Select drop down options from array in AngularJS using same ng-model

I have a cross platform app developed using AngularJS, Monaca and OnsenUI.
One of my views is large form where the user can select a number of drop-down select values. For a large part of the form the options would be Yes/No drop-down select options.
I have created an array in my app.js to hold the Yes/No options to populate the drop-down select values as below.
$scope.OptionYesNo = [{
yesnooptiondesc: "No",
yesnooptionid: "0"
}, {
yesnooptiondesc: "Yes",
yesnooptionid: "1"
}];
Then to populate my drop-down select options I do the following in my view:
<ons-row>
<ons-col>
Option 1
<select id="" name="" ng-model="OptionYesNo.yesnooptionid" ng-options="yesNoOption.yesnooptionid as yesNoOption.yesnooptiondesc for yesNoOption in OptionYesNo" ng-change="changedValue(OptionYesNo.yesnooptionid, 'OptionOne')">
<option value="" label="-- Please Select --"></option>
</select>
</ons-col>
</ons-row>
Then in my app.js I handle the changes in the selected values options in my changedValue(...) function as below. I pass an identifier to the function as well as an indicator to which array to save the value to (omitted because not relevant)
$scope.changedValue = function (selectedValue, identifier) {
switch (identifier) {
case "OptionOne":
$scope.optionOneArray.push(selectedValue);
break;
case "OptionTwo":
$scope.optionTwoArray = selectedValue;
break;
}
}
The problem is when I try and add a second Yes/No option using the same method as above e.g.
<ons-row>
<ons-col>
Option 2
<select id="" name="" ng-model="OptionYesNo.yesnooptionid" ng-options="yesNoOption.yesnooptionid as yesNoOption.yesnooptiondesc for yesNoOption in OptionYesNo" ng-change="changedValue(OptionYesNo.yesnooptionid, 'OptionTwo')">
<option value="" label="-- Please Select --"></option>
</select>
</ons-col>
</ons-row>
Whenever I change one select value, the other one changes as well because they use the same ng-model. How do I manage this situation? I dont want (or think I have to) create a $scope.OptionOneYesNo = [{ ... }]; $scope.OptionTwoYesNo = [{ ... }]; for each select drop-down as there could potential be 20+ select drop-downs.

You need to create different ng-models in the view for your dropdowns. Don't use the same model on all the dropdowns. You can still iterate over the options from $scope.optionsyesno on each dropdown. This should do the trick.

Probably this can point you to the right direction. You can repeat over your option array. As in an example i used which is working well:
<select class="form-control" ng-model="user.gefunden" ng-required="true" ng-init="user.gefunden = gefunden[0]" ng-options="o as o for o in gefunden">
</select>
Gefunden is my array in the controller.

Angular select model not setting value

I have an array of strings, that are account numbers. When a record in a table is clicked i provide a modal to update the record and one of the fields is account number. This displays and some what correctly but seems to loss its two way binding with vm.accountNumber but also does show the value that the model is.
vm.accountNumber always has a value that is set when the table row is being clicked for editing. It just never makes it to the select despite the model. I suspect im losing the two way link and it is creating its own variable for the model.
<select class="ui search fluid selection dropdown" id="accountSearch" ng-model="vm.accountNumber">
<!--ng-options="account for account in vm.accounts.slice(1)">-->
<option ng-repeat="account in vm.accounts | limitTo: vm.accounts.length : 1" value="account" ng-selected="account == vm.accountNumber">{{account}}</option>
</select>
Here is a snippet of the accounts array.
0:"-"
1:"0001"
2:"0002"
3:"0003"
4:"0004"

I would say just use ng-options directive instead of ng-repeating option
<select class="ui search fluid selection dropdown"
id="accountSearch" ng-model="vm.accountNumber"
ng-options="account for account in vm.accounts">
</select>
Demo Plunkr
Though I'd like to point out your problem was with option value attribute,
you should change
value="account"
to
value="{{account}}"