I am using laravel to develop an app that require an array of select option
My code
<select name="test_id[]" class="form-control select-test-{{$idselect}}"
id="select-{{Illuminate\Support\Str::random(10)}}">
<option value="">Select Patient Test</option>
#foreach ($tests as $item)
<option value="{{$item->id}}">{{$item->name}}</option>
#endforeach
</select>
Laravel validation code
$request->validate([
'test_id' => 'required:array'
], [
'test_id.required' => "Test is required"
]);
it goes through even when no selected
Output when not selected
Well the only thing you are missing is the multiple attribute in your select element.
<select multiple name="test_id[]" class="form-control select-test-{{$idselect}}" id="select-{{Illuminate\Support\Str::random(10)}}">
values are integer I guess, so you have to set validation for each index using * like this:
'test_id.*' : 'required|integer'
p.s: Asterisk symbol (*) is used to check values in the array, not the array itself.
I am using a foreach loop to generate a drop down list via bensampo's ENUMS library, but I need to be able to preselect one of them as I have an edit view and I need it to load the option that is in my database.
My select in my edit view:
<select name="type" id="type" class="form-control">
#foreach ($MailMessageTypes as $value =>$label)
<option value="{{$value}}">{{$label}}</option>
#endforeach
</select>
My function edit in my MailMessageController:
return view('MailMessage.edit', [
'MailMessage' => $MailMessage],
["MailMessageTypes" => MailMessageType::toSelectArray()
]);
I tried to use the enum library's getValues() and getKeys() in the controller but that generates (duplicates) for me, since the foreach keeps generating all options. I am using the select2 plugin
Added: I'm using the select2 plugin for the list.
On your Edit page, you are passing the existing mail message as $MailMessage. I am assuming your database has its value as id, so it can be accessed as $MailMessage->id. While you are looping through and displaying each option, you need to check if that option's value equals the id of the message you are editing. If it matches, you set the selected attribute on the <option>:
<select name="type" id="type" class="form-control">
#foreach ($MailMessageTypes as $value => $label)
<option value="{{$value}}" {{($MailMessage->id == $value) ? 'selected' : ''}}>
{{$label}}
</option>
#endforeach
</select>
In your HTML your <select> would end up looking something like:
<select name="type" id="type" class="form-control">
<option value="1">COM01</option>
<option value="2" selected>COM02</option>
<option value="3">COM03</option>
// ... the rest of the options
</select>
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'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"
Apparently this doesn't work:
select[multiple]{
height: 100%;
}
it makes the select have 100% page height...
auto doesn't work either, I still get the vertical scrollbar.
Any other ideas?
I guess you can use the size attribute. It works in all recent browsers.
<select name="courses" multiple="multiple" size="30" style="height: 100%;">
You can do this using the size attribute in the select tag.
Supposing you have 8 options, then you would do it like:
<select name='courses' multiple="multiple" size='8'>
Old, but this will do what you're after without need for jquery. The hidden overflow gets rid of the scrollbar, and the javascript makes it the right size.
<select multiple='multiple' id='select' style='overflow:hidden'>
<option value='foo'>foo</option>
<option value='bar'>bar</option>
<option value='abc'>abc</option>
<option value='def'>def</option>
<option value='xyz'>xyz</option>
</select>
And just a tiny amount of javascript
var select = document.getElementById('select');
select.size = select.length;
For jQuery you can try this. I always do the following and it works.
$(function () {
$("#multiSelect").attr("size",$("#multiSelect option").length);
});
You can only do this in Javascript/JQuery, you can do it with the following JQuery (assuming you've gave your select an id of multiselect):
$(function () {
$("#multiSelect").css("height", parseInt($("#multiSelect option").length) * 20);
});
Demo:
http://jsfiddle.net/AZEFU/
I know the question is old, but how the topic is not closed I'll give my help.
The attribute "size" will resolve your problem.
Example:
<select name="courses" multiple="multiple" size="30">
select could contain optgroup which takes one line each:
<select id="list">
<optgroup label="Group 1">
<option value="1">1</option>
</optgroup>
<optgroup label="Group 2">
<option value="2">2</option>
<option value="3">3</option>
</optgroup>
</select>
<script>
const l = document.getElementById("list")
l.setAttribute("size", l.childElementCount + l.length)
</script>
In this example total size is (1+1)+(1+2)=5.
You can do this with simple javascript...
<select multiple="multiple" size="return this.length();">
...or limit height until number-of-records...
<select multiple="multiple" size="return this.length() > 10 ? this.length(): 10;">
To remove the scrollbar add the following CSS:
select[multiple] {
overflow-y: auto;
}
Here's a snippet:
select[multiple] {
overflow-y: auto;
}
<select>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select multiple size="3">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
You can count option tag first, and then set the count for size attribute.
For example, in PHP you can count the array and then use a foreach loop for the array.
<?php $count = count($array); ?>
<select size="<?php echo $count; ?>" style="height:100%;">
<?php foreach ($array as $item){ ?>
<option value="valueItem">Name Item</option>
<?php } ?>
</select>
Using the size attribute is the most practical solution, however there are quirks when it is applied to select elements with only two or three options.
Setting the size attribute value to "0" or "1" will mostly render a default select element (dropdown).
Setting the size attribute to a value greater than "1" will mostly render a selection list with a height capable of displaying at least four items. This also applies to lists with only two or three items, leading to unintended white-space.
Simple JavaScript can be used to set the size attribute to the correct value automatically, e.g. see this fiddle.
$(function() {
$("#autoheight").attr("size", parseInt($("#autoheight option").length));
});
As mentioned above, this solution does not solve the issue when there are only two or three options.
To adjust the size (height) of all multiple selects to the number of options, use jQuery:
$('select[multiple = multiple]').each(function() {
$(this).attr('size', $(this).find('option').length)
})
friends:
if you retrieve de data from a DB:
you can call this
$registers = *_num_rows( Result_query )
then
<select size=<?=$registers + 1; ?>">
I had this requirement recently and used other posts from this question to create this script:
$("select[multiple]").each(function() {
$(this).css("height","100%")
.attr("size",this.length);
})
The way a select box is rendered is determined by the browser itself. So every browser will show you the height of the option list box in another height.
You can't influence that.
The only way you can change that is to make an own select from the scratch.
Here is a sample package usage, which is quite popular in Laravel community:
{!! Form::select('subdomains[]', $subdomains, null, [
'id' => 'subdomains',
'multiple' => true,
'size' => $subdomains->count(),
'class' => 'col-12 col-md-4 form-control '.($errors->has('subdomains') ? 'is-invalid' : ''),
]) !!}
Package: https://laravelcollective.com/