I am having trouble getting the date_select tags in Rails to show a blank option. Here is my code:
<%= select_month(#foo, :include_blank => true) %>
But that code renders this HTML without a blank option.
<select id="month" name="month"><option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
Am I overlooking something?
Which version of rails are you using? I just tried this in the console (Rails 3.0.8) and it works:
ruby-1.9.2-p0 > include ActionView::Helpers::DateHelper
ruby-1.9.2-p0 > select_month( Time.now )
=> <select id="date_month" name="date[month]">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option selected="selected" value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
ruby-1.9.2-p0 > select_month( Time.now, :include_blank => true )
=> <select id="date_month" name="date[month]">
<option value=""></option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option selected="selected" value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
Related
In a project I'm working on, I have 2 dropdown menus, state and area. I need to change the optgroup(which as options) in area based on the value of state. Whatever I've tried always works on Chrome & Firefox but never Safari.
What I tried, part 1
Initially, I just set the hidden attribute to true of the optgroup in area based on the value of state in Javascript. Worked in Chrome & Firefox. Safari? No.
What I tried, part 2
Alright, this time I set the disabled attribute to true and in CSS set the display to none for opt groups that are disabled. Code below.
const states_field = document.getElementById('state_search');
const areas_field = document.getElementById('areas_search');
states_field.addEventListener('change', filterArea);
function filterArea() {
console.log('working');
// 1. get the state selected by user
const selectedState = states_field.value;
console.log(selectedState);
// 2. go through all the states within the areas field
const areasStates = areas_field.getElementsByTagName('optgroup');
for (let i = 0; i < areasStates.length; i++) {
const areaState = areasStates[i];
console.log(areaState);
// 3. check if the selected state equals to any states in the areas field
if (selectedState != areaState.attributes.label.value) {
console.log(selectedState === areaState.attributes.label.value);
// 4. if not equal, set the optgroup hidden property to true
areaState.disabled = true;
console.log(areaState.disabled);
} else {
// 5. if equal, unhide
areaState.disabled = false;
console.log(areaState.disabled);
}
}
}
optgroup:disabled {
display: none;
}
h4 {
display: inline-block;
}
<h4>State</h4>
<select name="state_search" id="state_search">
<option value=""></option>
<option value="Johor">Johor</option>
<option value="Kedah">Kedah</option>
<option value="Kelantan">Kelantan</option>
<option value="Kuala Lumpur">Kuala Lumpur</option>
<option value="Labuan">Labuan</option>
<option value="Melaka">Melaka</option>
<option value="Negeri Sembilan">Negeri Sembilan</option>
<option value="Pahang">Pahang</option>
<option value="Penang">Penang</option>
<option value="Perak">Perak</option>
<option value="Perlis">Perlis</option>
<option value="Sabah">Sabah</option>
<option value="Sarawak">Sarawak</option>
<option value="Selangor">Selangor</option>
<option value="Terengganu">Terengganu</option>
</select>
<h4>Area</h4>
<select name="areas_search" id="areas_search">
<option value=""></option>
<optgroup label="Johor">
<option value="12">Batu Pahat</option>
<option value="13">Johor Bahru</option>
<option value="14">Kluang</option>
<option value="15">Kota Tinggi</option>
<option value="16">Kulai</option>
<option value="17">Mersing</option>
<option value="18">Muar</option>
<option value="19">Pontian</option>
<option value="20">Segamat</option>
<option value="21">Tangkak</option>
</optgroup>
<optgroup label="Kedah">
<option value="22">Baling</option>
<option value="23">Bandar Baharu</option>
<option value="24">Kota Setar</option>
<option value="25">Kuala Muda</option>
<option value="26">Kubang Pasu</option>
<option value="27">Kulim</option>
<option value="28">Langkawi</option>
<option value="29">Padang Terap</option>
<option value="30">Pendang</option>
<option value="31">Pokok Sena</option>
<option value="32">Sik</option>
<option value="33">Yan</option>
</optgroup>
<optgroup label="Kelantan">
<option value="34">Bachok</option>
<option value="35">Gua Musang</option>
<option value="36">Jeli</option>
<option value="37">Kota Bharu</option>
<option value="38">Kuala Krai</option>
<option value="39">Machang</option>
<option value="40">Pasir Mas</option>
<option value="41">Pasir Puteh</option>
<option value="42">Tanah Merah</option>
<option value="43">Tumpat</option>
</optgroup>
<optgroup label="Kuala Lumpur">
<option value="1">Kepong</option>
<option value="2">Segambut</option>
<option value="3">Batu</option>
<option value="4">Wangsa Maju</option>
<option value="5">Setiawangsa</option>
<option value="6">Titiwangsa</option>
<option value="7">Bukit Bintang</option>
<option value="8">Lembah Pantai</option>
<option value="9">Seputeh</option>
<option value="10">Cheras</option>
<option value="11">Bandar Tun Razak</option>
</optgroup>
<optgroup label="Labuan">
<option value="102">Victoria</option>
</optgroup>
<optgroup label="Melaka">
<option value="44">Alor Gajah</option>
<option value="45">Central Melaka</option>
<option value="46">Jasin</option>
</optgroup>
<optgroup label="Negeri Sembilan">
<option value="47">Jelebu</option>
<option value="48">Jempol</option>
<option value="49">Kuala Pilah</option>
<option value="50">Port Dickson</option>
<option value="51">Rembau</option>
<option value="52">Seremban</option>
<option value="53">Tampin</option>
</optgroup>
<optgroup label="Pahang">
<option value="54">Bentong</option>
<option value="55">Bera</option>
<option value="56">Cameron Highlands</option>
<option value="57">Jerantut</option>
<option value="58">Kuantan</option>
<option value="59">Lipis</option>
<option value="60">Maran</option>
<option value="61">Pekan</option>
<option value="62">Raub</option>
<option value="63">Rompin</option>
<option value="64">Temerloh</option>
</optgroup>
<optgroup label="Penang">
<option value="65">Central Seberang Perai</option>
<option value="66">North Seberang Perai</option>
<option value="67">South Seberang Perai</option>
<option value="68">Northeast Penang Island</option>
<option value="69">Southwest Penang Island</option>
</optgroup>
<optgroup label="Perak">
<option value="70">Bagan Datuk</option>
<option value="71">Batang Padang</option>
<option value="72">Hilir Perak</option>
<option value="73">Hulu Perak</option>
<option value="74">Kampar</option>
<option value="75">Kerian</option>
<option value="76">Kinta</option>
<option value="77">Kuala Kangsar</option>
<option value="78">Larut</option>
<option value="79">Matang</option>
<option value="80">Selama</option>
<option value="81">Manjung</option>
<option value="82">Muallim</option>
<option value="83">Perak Tengah</option>
</optgroup>
<optgroup label="Perlis">
<option value="84">Kangar</option>
</optgroup>
<optgroup label="Sabah">
<option value="103">Beaufort</option>
<option value="104">Beluran</option>
<option value="105">Keningau</option>
<option value="106">Kota Belud</option>
<option value="107">Kinabatangan</option>
<option value="108">Kota Kinabalu</option>
<option value="109">Kota Marudu</option>
<option value="110">Kota Penyu</option>
<option value="111">Kudat</option>
<option value="112">Kunak</option>
<option value="113">Lahad Datu</option>
<option value="114">Nabawan</option>
<option value="115">Papar</option>
<option value="116">Penampang</option>
<option value="117">Putatan</option>
<option value="118">Pitas</option>
<option value="119">Ranau</option>
<option value="120">Sandakan</option>
<option value="121">Semporna</option>
<option value="122">Sipitang</option>
<option value="123">Tambunan</option>
<option value="124">Tawau</option>
<option value="125">Telupid</option>
<option value="126">Tenom</option>
<option value="127">Tongod</option>
<option value="128">Tuaran</option>
</optgroup>
<optgroup label="Sarawak">
<option value="129">Betong</option>
<option value="130">Bintulu</option>
<option value="131">Kapit</option>
<option value="132">Kuching</option>
<option value="133">Limbang</option>
<option value="134">Miri</option>
<option value="135">Mukah</option>
<option value="136">Samarahan</option>
<option value="137">Sarikei</option>
<option value="138">Serian</option>
<option value="139">Sibu</option>
<option value="140">Sri Aman</option>
</optgroup>
<optgroup label="Selangor">
<option value="85">Gombak</option>
<option value="86">Hulu Langat</option>
<option value="87">Hulu Selangor</option>
<option value="88">Klang</option>
<option value="89">Kuala Langat</option>
<option value="90">Kuala Selangor</option>
<option value="91">Petaling</option>
<option value="92">Sabak Bernam</option>
<option value="93">Sepang</option>
</optgroup>
<optgroup label="Terengganu">
<option value="94">Besut</option>
<option value="95">Dungun</option>
<option value="96">Hulu Terengganu</option>
<option value="97">Kemaman</option>
<option value="98">Kuala Nerus</option>
<option value="99">Kuala Terengganu</option>
<option value="100">Marang</option>
<option value="101">Setiu</option>
</optgroup>
</select>
Works in Chrome & Firefox. Safari? No.
Is there any way to hide an optgroup in Safari with plain JS without having to resort to jQuery or other libraries?
Edit: So I tried to do this with jQuery and it still didn't work on Safari, after looking around on Webkit Bugzilla it seems that it's a bug
https://bugs.webkit.org/show_bug.cgi?id=8351 , doesn't look like it's solved yet....
In trying to put an [(ngModel)] on a select tag, the selected option no longer appears on loading the page. Before I put this on the select tag itself, the default option State was showing up just fine when I first loaded the page. Here is the code I have currently.
HTML:
<select class="form-control" id="inputState" name="inputState" [(ngModel)]="newJob.state" required>
<option value="" invalid selected>State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
TS:
export class NewJobListingComponent implements OnInit {
isDeleted: boolean = false;
currentTag: string = '';
maxTags: boolean = false;
newJob: JobListing = {
jobTitle: '',
city: '',
state: '',
department: '',
type: '',
tags: []
};
}
As I said, before I put [(ngModel)] on <select ...>, the dropdown box was correctly displaying State when the page first rendered, and now it is not. I even tried initializing newJob.state to 'State', and that did not work either. What am I doing wrong?
Try the following method by setting the default option style to display: none, It works for me. It acts as a placeholder when the user see the dropdown by default they ll see the State, when they open it, there'll be no State displayed. That's the hack. It acts like a placeholder.
<option value="" style="display: none">State</option>
I change this
newJob: JobListing = {
jobTitle: '',
city: '',
state: '',
department: '',
type: '',
tags: []
};
to below code and work correctly
newJob: any = {
jobTitle: "",
city: "",
state: "",
department: "",
type: "",
tags: []
};
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label>Property State</label>
<select name="Prorated.PropertyState " class="form-control select2" style="width: 100%;">
<option value="" disabled selected>Select State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
For example, I've got a drop-down list to select a State. When I type in "C" for instance in the search area of the box, it doesn't bring back "California." Does the "option value" have to be changed to just a "C" ? If so, how would I do it for every State that has the same beginning letter, etc.?
Thank you in advance.
When a <select> element is active, typing a letter that one of the options begins with will cause the first option that begins with that letter to become selected. Pressing the same letter again will cause the next option that begins with that letter to become selected and so on.
Run the snippet below (which uses your exact list) and activate the <select> (by either tabbing to it or clicking on it) and then press the "c" key. California will become selected. Press the "c" key again and Colorado will become selected. One more press and Connecticut becomes selected. Since that is the last <option> that starts with "c", another press of "c" will bring you back to California.
<div class="form-group">
<label>Property State</label>
<select name="Prorated.PropertyState " class="form-control select2" style="width: 100%;">
<option value="" disabled selected>Select State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
if you are trying for a type hint kinda thing, you could use datalist hinting
<datalist id="euroCountries">
<option value="Austria">
<option value="Belgium">
<option value="Czech Republic">
<option value="Denmark">
<option value="Estonia">
<option value="France">
<option value="Germany">
</datalist>
I have a situation where I'm using an HTML Datalist and text input for users to select or type in a state, where there are a long list of options. Firefox and Chrome will enable a scrollbar to be able to select options further down the list that aren't initially visible. In Chrome this ability is enabled when you use the autocomplete="off" attribute. IE 10 unfortunately doesn't show a scrollbar in any case that I'm aware of, so the user can't see or select what is initially visible, even if they attempt to key down to the bottom of the list.
Does anyone know of a solution to get IE 10 to show a scrollbar on a very long datalist?
You can see my example on JSFiddle:
http://jsfiddle.net/amGY9/15/
<datalist id="states_list">
<option value="0">Alabama</option>
<option value="1">Alaska</option>
<option value="56">American Samoa</option>
<option value="2">Arizona</option>
<option value="3">Arkansas</option>
<option value="62">Army Europe (PO)</option>
<option value="4">California</option>
<option value="54">Canal Zone</option>
<option value="5">Colorado</option>
<option value="6">Connecticut</option>
<option value="7">Delaware</option>
<option value="8">District of Columbia</option>
<option value="9">Florida</option>
<option value="10">Georgia</option>
<option value="52">Guam</option>
<option value="11">Hawaii</option>
<option value="12">Idaho</option>
<option value="13">Illinois</option>
<option value="14">Indiana</option>
<option value="15">Iowa</option>
<option value="16">Kansas</option>
<option value="17">Kentucky</option>
<option value="18">Louisiana</option>
<option value="19">Maine</option>
<option value="53">Mariana Islands</option>
<option value="60">Marshall Islands</option>
<option value="20">Maryland</option>
<option value="21">Massachusetts</option>
<option value="22">Michigan</option>
<option value="59">Micronesia</option>
<option value="23">Minnesota</option>
<option value="24">Mississippi</option>
<option value="25">Missouri</option>
<option value="26">Montana</option>
<option value="27">Nebraska</option>
<option value="28">Nevada</option>
<option value="29">New Hampshire</option>
<option value="30">New Jersey</option>
<option value="31">New Mexico</option>
<option value="32">New York</option>
<option value="33">North Carolina</option>
<option value="34">North Dakota</option>
<option value="35">Ohio</option>
<option value="36">Oklahoma</option>
<option value="37">Oregon</option>
<option value="58">Pacific Trust Terr.</option>
<option value="61">Palau Islands</option>
<option value="38">Pennsylvania</option>
<option value="51">Puerto Rico</option>
<option value="39">Rhode Island</option>
<option value="40">South Carolina</option>
<option value="41">South Dakota</option>
<option value="42">Tennessee</option>
<option value="43">Texas</option>
<option value="57">US Outlying Islands</option>
<option value="44">Utah</option>
<option value="45">Vermont</option>
<option value="55">Virgin Islands</option>
<option value="46">Virginia</option>
<option value="47">Washington</option>
<option value="48">West Virginia</option>
<option value="49">Wisconsin</option>
<option value="50">Wyoming</option>
</datalist>
<input type="search" id="state" name="state" list="states_list" placeholder="Start typing or click" autocomplete="off">
I have a select box where the user can select the year s/he was born and I would like to start at 1970 when clicked but still keep "year" as the selected option by default.
Is there anyway (i.e. with JavaScript) I can start in the middle of the option range, like 1970, and have earlier years above and later years below?
Example:
<select>
<option selected>Year</option>
<option value="1950">1950</option>
<option value="1951">1951</option>
<option value="1952">1952</option>
<option value="1953">1953</option>
<option value="1954">1954</option>
<option value="1955">1955</option>
<option value="1956">1956</option>
<option value="1957">1957</option>
<option value="1958">1958</option>
<option value="1959">1959</option>
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
<option value="1964">1964</option>
<option value="1965">1965</option>
<option value="1966">1966</option>
<option value="1967">1967</option>
<option value="1968">1968</option>
<option value="1969">1969</option>
<option value="1970">1970</option>
<option value="1971">1971</option>
<option value="1972">1972</option>
<option value="1973">1973</option>
<option value="1974">1974</option>
<option value="1975">1975</option>
</select>