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
Related
I have a select HTML element in an Angular ngFor loop:
<select formControlName="type" required>
<option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option>
</select>
In Internet Explorer, the first item in the list is selected when the template loads, but it's value isn't set in the form control, so causes a 'required' validation error until another value is selected in the list. I want to have a 'Please select' option that has a null value to prevent this happening.
This is for Angular 2+ used with or without TypeScript
Add an option like so:
<option [ngValue]="null">Please select</option>
So your control will look like:
<select formControlName="type" required>
<option [ngValue]="null">Please select</option>
<option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option>
</select>
This works as Angular inspects the value attribute because of the square brackets. The value becomes a true null, unlike if we used value="" (this is just an empty string and doesn't match null).
In case you're not using ngForm, another approach to implementing the selected value is to do something like [value]='selectedType' (change)='selectedType = $event.target.value' in your select tag. For example:
In your component.ts:
public selectedType: string;
In your component.html
<select [value]='selectedType' (change)='selectedType = $event.target.value'>
<option value=''>-- Select your Type --</option>
<option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option>
</select>
component.ts
public selectedValue = 'None';
component.html:
<div ">
<label>Highlight</label>
<select [(ngModel)]="selectedTrunk" (change)="onChangeTrunk($event)">
<option value='None'>None</option>
<option *ngFor="let trunklist of DRLNameTrunkList" [selected]="trunk" [value]="trunklist.SIPTRUNKNAME">{{trunklist.SIPTRUNKNAME}}</option>
</select>
</div>
This is my code pelase modify as per your requirements
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 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.
Iam trying to edit student details.
iam fetch values from database. blood group fetch from database to display select box. and also display other blood groups in same select box.
select class="form-control" name="studbldgrp" id="studbldgrp">
option value="{{$student->studbldgrp}}">{{$student->studbldgrp}}</option>
option value="O+ve">O+ve</option>
option value="O-ve">O-ve</option>
<option value="A+ve">A+ve</option>
<option value="A-ve">A-ve</option>
<option value="B+ve">B+ve</option>
<option value="B-ve">B-ve</option>
<option value="AB+ve">AB+ve</option>
<option value="AB-ve">AB-ve</option>
<option value="Other">Other</option>
</select>
my problem is if im fetch value is A+ ,and display in select box. but it also in option value field.
i no need to again this value(A+)A +ve in select option field.
how to disable this field???
Create an array of your groups. Than iterate over it and don't print value matches $student->studbldgrp.
Array in php:
$groups = array(
'O+ve',
'O-ve',
'A+ve',
'A-ve',
'B+ve',
'B-ve',
'AB+ve',
'AB-ve',
'Other'
);
Blade template:
<select class="form-control" name="studbldgrp" id="studbldgrp">
<option value="{{$student->studbldgrp}}">{{$student->studbldgrp}}</option>
#foreach ($groups as $group)
#if ($group != $struden->studbldgrp)
<option value="{{ $group }}">{{ $group }}</option>
#endif
#endforeach
</select>
I've tried numerous ways to try and my capybara test to select an option from this form.
<select id="mapping_midi_controller_id" name="mapping[midi_controller_id]"><option value="17">MIDI Fighter Classic</option>
<option value="18">MIDI Fighter Pro</option>
<option value="16">Traktor Control S2</option>
<option value="15">Traktor Control S4</option>
<option value="19">VCI-100</option>
<option value="0">Other ...</option>
</select>
I've tried
1)page.select "VCI-100", :from => "mapping_midi_controller_id"
2)select "19", :from => "mapping_midi_controller_id"
Any thoughts?
I think the second command should be:
select "VCI-100", :from => "mapping_midi_controller_id"