<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
How in Haml can I create a select multiple tag like in HTML? Like the nice helper function of select_tag.
Just do this
%select{:multiple => true}
%option{value: 'volvo} Volvo
%option{value: 'saab'} Saab
%option(value: 'opel'} Opel
%option{value: 'audi'} Audi
You can obviously also use select_tag:
= select_tag
EDIT
An even cleaner way to do the above:
%select{:multiple => true}
- ["Volvo", "Saab", "Opel", "Audi"].each do |o|
%option{value: o.downcase} o
Related
I want to get country group name when select option. I've countries with several group like
<template>
<select id="countries" v-model="country" #change="getCountryGroup($event)">
<optgroup label="Asia">
<option value="AF">Afghanistan</option>
<option value="AM">Armenia</option>
<option value="AZ">Azerbaijan</option>
...
<option value="BD">Bangaldesh</option>
...
</optgroup>
<optgroup label="Australia / Oceania">
<option value="AS">American Samoa</option>
<option value="AU">Australia</option>
<option value="CK">Cook Islands</option>
</optgroup>
<optgroup label="Africa">
<option value="DZ">Algeria</option>
<option value="AM">Angola</option>
<option value="AZ">Azerbaijan</option>
</optgroup>
<optgroup label="South America">
<option value="AR">Argentina</option>
<option value="BO">Bolivia</option>
<option value="BR">Brazil</option>
</optgroup>
<optgroup label="North America">
<option value="US">United States</option>
<option value="UM">United States Minor Outlying Islands</option>
<option value="CA">Canada</option>
</optgroup>
<optgroup label="Europe">
<option value="UK">United Kingdom</option>
<option value="AL">Albania</option>
<option value="AD">Andorra</option>
</optgroup>
</select>
</template>
Suppose when I select Bangladesh then I want to get optgroup name Asia. Here is my vueJs method
getCountryGroup: function(event){
console.log( event.target.getAttribute('label') );
}
Here are two steps
Get the selected index
Find the selected option
Select the parent element (optgroup) for the selected option
Finally, get the label (Country group)
getCountryGroup: function(event){
// 1. Get the selected index
const index = event.target.selectedIndex;
// 2. Find the selected option
const option = event.target.options[index];
// 3. Select the parent element (optgroup) for the selected option
const optgroup = option.parentElement;
// 4. Finally, get the label (Country group)
const countryGroup = optgroup.getAttribute('label');
console.log(countryGroup);
}
Here is the demo https://codepen.io/maab16/pen/KKKpJba
I am using materilizecss and i have the following dropdown:
<select class="txtInput" data-val="true" data-val-number="The field SelectedAssetCategoryId must be a number." data-val-required="Select a asset category" id="ddlAssetCategory" name="SelectedAssetCategoryId"><option value="">Asset Category</option>
<option value="1">Disease State/Condition Training</option>
<option value="5">Hot Topics Training</option>
<option value="6">Launch Training</option>
<option value="7">Medical Meetings</option>
<option value="2">Product Training</option>
<option value="8">Quiz</option>
<option value="4">Real World Evidence/HEOR Training</option>
<option value="3">Treatment/Competitive Landscape Training</option>
</select>
I was initilizing it like so:
$("select").not('[multiple="multiple"]').formSelect({
});
But what i wanted was the dropdown to show below the selectbox not above , so i added the below line of code:
$("select").not('[multiple="multiple"]').formSelect({
belowOrigin: true
});
But even this does't seem to work , What option can i add so that the dropdown menu shows below the select box ?
Use This :
$("select").not('[multiple="multiple"]').formSelect({
dropdownOptions: {coverTrigger: false}
});
Instead of :
$("select").not('[multiple="multiple"]').formSelect({
belowOrigin: true
});
JSFiddle
Actually with dropdownOptions you can pass dropdown options to select form.
I want to disable and enable a select, using angular based on a condition.
<select [disabled]="!isContinentSelected" class="form-control" formControlName="country">
<option value="">Select Your Country</option>
<option *ngFor="let country of countries" value="{{country.id}}">{{country.name}}</option>
</select>
isContinentSelected returns true or false. But the is always enable even the condition is false. Im using Angular 5. How can I achieve this?
<select [attr.disabled]="isContinentSelected ? '': null" class="form-control" formControlName="country">
<option value="">Select Your Country</option>
<option *ngFor="let country of countries" value="{{country.id}}">{{country.name}}</option>
</select>
Please try with this code.
This works in my case.
I need a help
I'm using simple form for select box. The code is here: = f.input :dogs, collection: (0..7). When render on browser, it will display select box with value from 0 to 7. I want add text behind value when select box dropdown. Eg: 1 dog - 2 dogs. I tried but not work.
Pls help me
You can use something like the following:
= f.input :dogs, options_for_select([["1 dog", 1], ["2 dogs", 1]])
= f.input :dogs, options_for_select((1..8).map{|x| x==1? ["#{x} dog",x] : ["#{x} dogs",x] })
A really simple and elegant solution could be something like this:
Create a helper method:
def humanize_dogs
0.upto(7).each_with_object({}) { |c, h| h[pluralize(c, 'dog')] = c }
end
# => {"0 dogs"=>0, "1 dog"=>1, "2 dogs"=>2, "3 dogs"=>3, "4 dogs"=>4, "5 dogs"=>5, "6 dogs"=>6, "7 dogs"=>7}
In your form add the next line:
= f.input :dogs, collection: humanize_dogs
This generates...
<select id="#" name="#">
<option value=""></option>
<option value="0">0 dogs</option>
<option value="1">1 dog</option>
<option value="2">2 dogs</option>
<option value="3">3 dogs</option>
<option value="4">4 dogs</option>
<option value="5">5 dogs</option>
<option value="6">6 dogs</option>
<option value="7">7 dogs</option>
</select>
I have the following code in html:
<select>
<option text="item9" value="9"></option>
<option text="item10" value="10"></option>
</select>
The select shows up as blank in firefox. There are no elements. But it works in IE. The following works in both:
<select>
<option text="item9" value="9">item9</option>
<option text="item10" value="10">item10</option>
</select>
I am using the following dojo code to create the dropdown:
dojo.byId("sel1").add(dojo.create("option", { text:optionText, value:docNode.childNodes[i].getAttribute("id") }));
How do I create
<option text="item9" value="9">item9</option>
with dojo?
All you really need is:
<select>
<option value="9">item9</option>
<option value="10">item10</option>
</select>
The text attribute is non-standard.
You can use:
dojo.byId("sel1").add(dojo.create("option",{
innerHTML:optionText,
value:docNode.childNodes[i].getAttribute("id")
}));