How to add default value in multiple select box? - html

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>

Related

Default selected value in drop down not working

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().

Multiselect with selected values

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

How can I add an ID to an option inside a grouped_collection_select

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"]')

how to get my dropdown menu of states to autofill the correct information in a better way then i have

I have a dropdown menu of states and i have it auto populating the correct state and showing at the top of the list and removing the state from farther down in the list, but what I would like to have it do is just to go down to that state rather then showing at the top of the list and removing from the correct spot in the list of states.
<label for="state">State</label>
<select class="form-control" id="state" name="state">
<% options = ["Alabama","Alaska","Arizona","Arkansas","California","Colorado",
"Connecticut","Delaware","District Of Columbia",
"Florida","Georgia","Hawaii","Idaho","Illinois",
"Indiana","Iowa","Kansas","Kentucky","Louisiana",
"Maine","Maryland","Massachusetts","Michigan",
"Minnesota","Mississippi","Missouri","Montana",
"Nebraska","Nevada","New Hampshire","New Jersey",
"New Mexico","New York","North Carolina",
"North Dakota","Ohio","Oklahoma", "Oregon",
"Pennsylvania","Rhode Island","South Carolina",
"South Dakota","Tennessee","Texas","Utah","Vermont","Virginia",
"Washington","West Virginia","Wisconsin","Wyoming"]- [customerinfo[0]['state'] ]%>
<option value=<%= customerinfo[0]['state'] %>><%= customerinfo[0]['state'] %></option>
<% options.each do |option| %>
<option value=<%=option%>><%=option%></option>
<% end %>
</select>

Without any helpers you could write something like this (note the <%= ' selected' if option == customerinfo[0]['state'] %> part):
<label for="state">State</label>
<select class="form-control" id="state" name="state">
<% options = ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","District Of Columbia","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma", "Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"] %>
<% options.each do |option| %>
<option value="<%= option %>"<%= ' selected' if option == customerinfo[0]['state'] %>><%= option %></option>
<% end %>
</select>

Bootstrap "multiple" attribute for simple_form

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.