I'm using the Bootstrap-Select plugin like this:
<select class="selectpicker dropup"></select>
<button>Add option</button>
and jQuery code:
$(function(){
$(".selectpicker").selectpicker('hide');
$(button).click(function() {
$(".selectpicker").append(`
<option value="">--Choose option--</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
`);
$(".selectpicker").selectpicker('refresh');
$(".selectpicker").selectpicker('show');
});
});
But when select appears, it does not take the first option as default but has text like image. Can I change this depending on the select?
I'm using Bootstrap select for multiple choice (https://developer.snapappointments.com/bootstrap-select/) and I had to change the default behaviour, it's not the same as yours but I hope it can give an hint anyway.
In our case we had to update the default style. The default style is a bootstrap btn-default, and I was able to update it with the following code:
$('#my-select').selectpicker({
styleBase: 'form-control',
style: '',
});
More here
If you want to change the text 'Nothing Selected', set the title property to whatever you need.
eg : title="My Custom Text"
<select class="selectpicker dropup" title="My Custom Text"></select>
<button>Add option</button>
Related
I have a form using a select. I'm trying to set a default value, which I want to disable, so the dropdown will show "-- select state --" as the first option and will force the user to make a selection.
My problem is it's not working and the select always starts out blank.
Here is my code:
<select ng-model="contactEditCtrl.addressData.state" style="width: 50%;">
<option ng-disabled="$index === 1" ng-selected="true">--Select State--</option>
<option value="{{state.abbreviation}}" ng-repeat="state in contactEditCtrl.states">{{state.name}}</option>
</select>
Check this one with default <option> and ng-options:
<select ng-model="contactEditCtrl.addressData.state"
ng-options="state.name as state.name for state in contactEditCtrl.states" >
<option value="" ng-disabled="true">-- select state --</option>
</select>
Demo fiddle
It will be converted to:
<select ng-model="addressData.state" style="width: 50%;"
ng-options="state.name as state.name for state in states" class="ng-valid ng-dirty">
<option value="" ng-disabled="true" class="" disabled="disabled">-- select state --</option>
<option value="0">CCCCC</option>
<option value="1">QQQQQQ</option>
</select>
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.
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.
Taken from here
So I'd suggest writing it like this.
var app = angular.module('myApp', []);
// Register MyController object to this app
app.controller('MyController', function MyController($scope) {
this.addressData = {state: "--Select State--"};
this.states = [{abbreviation: 'a', name:'ant'}, {abbreviation: 'b', name:'asd'}, {abbreviation: 'b', name:'asd2'}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app='myApp' ng-controller='MyController as contactEditCtrl'>
<select ng-model="contactEditCtrl.addressData.state" style="width: 50%;">
<option value="--Select State--">--Select State--</option>
<option ng-value="state.abbreviation" ng-repeat="state in contactEditCtrl.states">{{state.name}}</option>
</select>
</div>
I want to call specific methods based on which option was clicked, like this:
<select>
<option value="0" ng-click="callMethodOne()">1</option>
<option value="1" ng-click="callMethodTwo()">2</option>
</select>
But it doesn't work, I can't call ng-click inside the option tag.
I also can't use it inside the select tag because I won't be able to call the function by its name.
How could I solve this?
You need to add ng-change config along with ng-model on <select> tag.
<select ng-model="selectedOption" ng-change="onChange">
<option value="0">1</option>
<option value="1">2</option>
</select>
Now, In your controller, define onChange function as
$scope.onChange = function(){
// The option selected is stored in $scope.selectedOption
// perform the business logic using $scope.selectedOption
}
I need to pop up tool tip over disabled select field, i am currently using angularjs v1.3.7, using angular-foundation tooltip to display tooltip content.
please suggest me possible solutions.
Thanks in Advance!!!
Didn't try it in the that version of Angular but I remember it was not working. You can always wrap your select field in a div and add your tooltip on it instead of your field.
<div popover-trigger="mouseenter" popover="I appeared on mouse enter!" style="display:inline-block;width:200px;">
<select disabled>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
See a demo.
By default angular uses an empty value if nothing has been selected in a <select>. How can I change this to a text that says Please select one?
You didnt provide any code so I can't give an example relative to your code, but try adding an option element, e.g.
<select ng-model="item" ng-options="item.category for item in items"
ng-change="doSomething()">
<option value="">Please select one</option>
</select>
Via the ng-selected attribute:
<select>
<option>Hello!</option>
<option ng-selected="selected">Please select one</option>
<option>Another option</option>
</select>
Check out the reference: https://docs.angularjs.org/api/ng/directive/ngSelected
I have a requirement where I need to show the text of angularjs dropdown (Not value) in the title tag of the dropdown box. My angular code is like this :
<select id="inputID" name="inputName"
ng-options="item.value as item.display for item in genders"
ng-model="model.Base.currentRecord.value.Code.value" class="form-control input-sm">
<option value="">Select...</option> </select>
As the dropdown is being generated dynamical, the value of the options and the text in the options are different. in the title tag I am able to get the value with title={{model.Base.currentRecord.value.Code.value}} but I need text not the value.
anyone has any idea ?
Would this work? demo
<select id="inputID" title={{model.Base.currentRecord.value.Code.display}} name="inputName" ng-options=" item.display for item in genders"
ng-model="model.Base.currentRecord.value.Code" class="form-control input-sm">
<option value="">Select...</option>
</select>
<strong>Selected value:</strong> {{model.Base.currentRecord.value.Code.value}}