I'm trying to create a select box but I don't want it to be a drop down. I'm sorta new to react in some forms.
Picture is attached of what I'm trying to do.
Should be straight forward to do the following:
Add css:
select {
overflow-y: auto;
}
Then make sure you use multiple="true" on the select
<select multiple="true" size="5">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
No need for react really
Related
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>
I need a multi select for my form and I m using the bootstrap select picker but my select option data is loaded from API dynamically and I using ng-repeat to show the option in the select tag. But my select doesnt show up any options. May i know what wrong with my code?
If i use the default html5 multiple select it can show all the data rows.
<select class="form-control" ng-model="inputUserPermission" size="10" multiple required>
<option ng-repeat="salesPersonInSoaps in salesPersonInSoap" value="{{salesPersonInSoaps.FirstName}}">{{salesPersonInSoaps.email}}</option>
</select>
Use bootstrap select picker doesnt work.
<select class="form-control selectpicker" ng-model="inputUserPermission" multiple required>
<option ng-repeat="salesPersonInSoaps in salesPersonInSoap" value="{{salesPersonInSoaps.FirstName}}">{{salesPersonInSoaps.email}}</option>
</select>
Removing select-Multiple will fix it I suppose.
<select class="form-control selectpicker" ng-model="inputUserPermission" multiple required>
<option ng-repeat="salesPersonInSoaps in salesPersonInSoap" value="{{salesPersonInSoaps.FirstName}}">{{salesPersonInSoaps.email}}</option>
</select>
i ust use ng-options in a select element in angular js. and in select select i just wants to add a extra options at the beginning of options.my code ===>
<div class="form-group">
<select class="form-control select2" ng-options="(o.fullName+' ('+o.email+')') for o in SubTeamUserList track by o.id" name="SelectedUserList" ng-model="SelectedUserList" multiple data-placeholder="Search By User" style="width: 100%;">
<option value="" disabled>Select A User</option>
</select>
</div>
that is not working for me ? i dont know why.then i search on net and found some solution like =>
angularJS - add a Static option with ng-options
Add two extra options to a select list with ngOptions on it
Angular ng-options - Is there a way to add an option when the model contains a value not present in the options list?
after see above solutions i tried =>
<div class="form-group">
<select class="form-control select2" ng-options="" name="SelectedUserList" ng-model="SelectedUserList" multiple data-placeholder="Search By User" style="width: 100%;">
<option value="" disabled>Select A User</option>
<option ng-repeat="(o.fullName+' ('+o.email+')') for o in SubTeamUserList track by o.id">{{(o.fullName+' ('+o.email+')')}}</option>
</select>
</div>
after doing this this is also showing something like =>
but that is also not working for me i dont know why? can anybody help me ???
I am working on ionic and stucked on one point that I want ionic toggle button with Dropdown in a row.Means Toggle name then dropdown then button . I have created a PEN for this **http://codepen.io/anujsphinx/pen/aBBMVg** . Need help
Pointer events are turned off with CSS in ionic toggle. You have to override the css. I added class to toggle and used css to do that.
HTML:
<ion-toggle ng-repeat="item in settingsList"
ng-model="item.checked" ng-checked="item.checked" class="offPointer">
{{ item.text }}
<select>
<option>Option 1</option>
<option selected>Option 2</option>
<option>Option 3</option>
</select>
</ion-toggle>
CSS:
.offPointer{
pointer-events: all !important;
}
You can find the full code here. http://codepen.io/anon/pen/ZBLGeK?editors=1100
Let me know if this doesn't help you.
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.