I would like to have a scroll down menu with different options to choose from using Bootstrap, as demonstrated here:
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
I am currently using simple_form to construct my menu (it is a dropdown menu by default):
<%= f.input :member_type, collection: Form::MEMBERSHIPS, include_blank: true, error: false %>
Which outputs as such:
<div class="form-group select required form_member_type"><label class="select required control-label" for="form_member_type"><abbr title="required">*</abbr> Member type</label><select class="select required form-control" name="form[member_type]" id="form_member_type"><option value=""></option>
<option value="Monthly member: $55">Monthly member: $55</option>
<option value="Pay-Per-Use (cash): 15% discount">Pay-Per-Use (cash): 15% discount</option>
<option value="Youth member: $35">Youth member: $35</option>
<option value="Monthly with children (Friday's): $55 + $16 per child">Monthly with children (Friday's): $55 + $16 per child</option>
<option value="Other - specify in notes">Other - specify in notes</option></select></div>
I need to somehow insert the multiple attribute into the select tag. Is there a technique to do this using embedded Ruby without having to manually edit the html code?
Just replace your code with following line
<%= f.input :member_type, collection: Form::MEMBERSHIPS, include_blank: true, error: false,:input_html => {:multiple => true} %>
Hope I answered your question.
Related
I'm using a html dropdown in my project. How do I get the select value in the Express server?
<div class="mb-3">
<label for="kk" class="form-label">Designation</label>
<select class="form-select" name="picker" aria-label="Default select example" id="kk">
<option selected>Select</option>
<option value="1">Proffesor</option>
<option value="2">Associate Proffessor</option>
<option value="3">Lab Assistant</option>
</select>
</div>
In my post request handling method I have used this code to get the value:
const f = req.body.picker;
What this gives me is the index of the selected values in the dropdown like 0,1,2 etc instead of actual values like professor, associate professor,lab assistant.
You actually get what is in value attribute of the selected option when you send your request. For the data you want, you can do it this way:
<div class="mb-3">
<label for="kk" class="form-label">Designation</label>
<select class="form-select" name="picker" aria-label="Default select example" id="kk">
<option value="" selected>Select</option>
<option value="Proffesor">Proffesor</option>
<option value="Associate Proffessor">Associate Proffessor</option>
<option value="Lab Assistan">Lab Assistant</option>
</select>
</div>
And that is what you will get :
const f = req.body.picker; // -> "" or "Proffesor" or "Associate Proffessor" or "Lab Assistan"
I have a drop down which by default on page load it select "PLEASE SELECT USECASE" in the dropdown
But i am expecting "EUC Proxy" to be selected on page load instead of "PLEASE SELECT USECASE"
HTML IS SHOWN BELOW
<div class="form-group">
<label for="bot">Use Case</label>
<select id="select" formControlName="useCase" class="form-control" class="form-control" [(ngModel)]="scheduleModel.UsecaseId">
<option value="-1" [selected]="isSelected"> Please Select Use Case </option>
<option *ngFor="let uc of useCaseList" [value]="uc.BOTId"> {{uc.BOTName}}
</option>
</select>
</div>
</div>
*HTML i CHANGED TO *
[selected]="1"
But it doesn't made any difference.See the changed HTML Below
<div class="form-group">
<label for="bot">Use Case</label>
<select id="select" formControlName="useCase" class="form-control" class="form-control" [(ngModel)]="scheduleModel.UsecaseId">
<option *ngFor="let uc of useCaseList" [selected]="1" [value]="uc.BOTId"> {{uc.BOTName}}
</option>
</select>
</div>
</div>
SAME IN IMAGE
I am getting "test Bot" selected in drop-down, which is last item in the drop down like below:
But i am expecting this: where uc.BOTId =1 is "EUC Proxy" Not "test Bot"
TS file
ngOnInit() {
getUsecaseList() {
this.manageBotService.getAllBots().subscribe(res => this.useCaseList = res);
}
}
Why i am unable to select "EUC Proxy" which having uc.BOTId =1 on page load?
Remove [selected] from your options.
The [(ngModel)] part from your 'select' will set the value to selected (depending on the value the 'scheduleModel.UsecaseId' has.
I didn't see you using the instruction that makes it default:
value='default'
for instance:
<select name='test'>
<option value='default' selected='selected'>Please select the value</option>
<option value='value1'>value1</option>
<option value='value2'>value2</option>
</select>
Set scheduleModel.UsecaseId = 1 after loading the drop-down on ng-init().
I have a multiselect box and this belongs to a user or user access
When I try to edit user, which has prevous access selected
The code to generate select is:
selected_access = [1,2,3]
<%= select_tag :user_access, options_from_collection_for_select(user_accesss, 'id', 'name', selected: selected_access),{ :multiple => true } %>
I get a multiselect with already selected items:
<select name="user_access[]" id="user_access" multiple="multiple" size="219">
<option selected="selected" value="1">dashboard</option>
<option selected="selected" value="2">profile</option>
<option selected="selected" value="3">home</option>
<option value="4">account</option>
<option value="5">users</option>
<option value="6">admin</option>
<option value="7">contact</option>
</select>
When I try to select another set of items. I get a combination of both sets?
so when I submit my form after selecting account I get
[1,2,3,4]
I expect to get only
[4]
Does anyone know what is going on?
I'm using Ruby on Rails to select the already selected item using
selected: [1,2,3]
Thanks
I currently have a Multi Select Box that groups Rooms with their respective Building.
Everything works great, except, I would like to add an ID to each option.
How can I do this?
FORM
<div class="form-group">
<%= f.grouped_collection_select(:room_ids, Building.order('name ASC'), :rooms, :name, :id, :name, {include_blank: false}, {multiple: true, size: 10, :class => "form-control"}) %>
</div>
HTML
<select multiple="multiple" size="10" class="form-control" name="key[room_ids][]" id="key_room_ids" data-parsley-multiple="key[room_ids][]" data-parsley-id="5221">
<optgroup label="Accounting Library">
###Is their a way to add an ID to this so I can manipulate it with javascript?
<option value="142">105</option>
<option value="143">105A</option>
</optgroup>
<optgroup label="Ahmanson Center">
<option value="721">fad</option>
<option selected="selected" value="144">105B</option>
</optgroup>
</select>
I don't believe there is any way to add an id to each option using grouped_collection_select, but you can easy select an option using jQuery. For example to select the option with value = '721' use the following selector:
$('#key_room_ids option[value="721"]')
I am using multiple select box to get collection of values. Now i want to set a default value for that. I tried the below but its not working. If you have any idea please share.
<select name="protocols[]" multiple="multiple" id="form-field-select-2" class="form-control" default="hls">
<%videos.each do |option|%>
<option><%=option%> </option>
<%end%>
</select>
This code should do the trick:
<select name="protocols[]" multiple="multiple" id="form-field-select-2" class="form-control">
<%videos.each do |option|%>
<option value=<%= option %> <%= option == 'hls' ? 'selected="selected"' : '' %>><%=option%> </option>
<%end%>
</select>
I think this question is already exits.
You need to find first solutions then ask if not found.
I hope you can find your answer in below link: click
Where #arr_selected is saved selected values array
<% #arr_selected = ['first','second'] %>
<select name="protocols[]" multiple="multiple" id="form-field-select-2" class="form-control" default="hls">
<%videos.each do |option|%>
<option <% (#arr_selected.include?(option)) ? "selected" : "" %> ><%=option%> </option>
<%end%>
</select>