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>
Related
<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>
This is not a technical question.
I just can't find what i am really looking for : a premade list of all spoken languages (Preferably in french).
Kinda like this : http://snipplr.com/view/4794/50-most-common-languages-spoken-in-the-united-states--drop-down-list-for-an-online-form/
But the one above is incomplete and it's in english :/
Maybe one of you knows where i could find something like this. It would be terribly long to do and my guess is that this was already made at least a thousand times. (Any distro, any international websites...)
I have tried googling it but i get no accurate results. (it's a little pointy)
I am sorry if this is out of context or shouldn't be asked here. If that is the case, feel free to do what you must.
Many thanks!
Here is the site with what you (I am sure- not you alone) were looking for:
http://www.freeformatter.com/iso-country-list-html-select.html
and this is the list of languages "borrowed "from Google Translate:
<select>
<option value=af>Afrikaans</option>
<option value=sq>Albanian</option>
<option value=am>Amharic</option>
<option value=ar>Arabic</option>
<option value=hy>Armenian</option>
<option value=az>Azerbaijani</option>
<option value=eu>Basque</option>
<option value=be>Belarusian</option>
<option value=bn>Bengali</option>
<option value=bs>Bosnian</option>
<option value=bg>Bulgarian</option>
<option value=ca>Catalan</option>
<option value=ceb>Cebuano</option>
<option value=ny>Chichewa</option>
<option value=zh-CN>Chinese</option>
<option value=co>Corsican</option>
<option value=hr>Croatian</option>
<option value=cs>Czech</option>
<option value=da>Danish</option>
<option value=nl>Dutch</option>
<option value=en>English</option>
<option value=eo>Esperanto</option>
<option value=et>Estonian</option>
<option value=tl>Filipino</option>
<option value=fi>Finnish</option>
<option value=fr>French</option>
<option value=fy>Frisian</option>
<option value=gl>Galician</option>
<option value=ka>Georgian</option>
<option value=de>German</option>
<option value=el>Greek</option>
<option value=gu>Gujarati</option>
<option value=ht>Haitian Creole</option>
<option value=ha>Hausa</option>
<option value=haw>Hawaiian</option>
<option value=iw>Hebrew</option>
<option value=hi>Hindi</option>
<option value=hmn>Hmong</option>
<option value=hu>Hungarian</option>
<option value=is>Icelandic</option>
<option value=ig>Igbo</option>
<option value=id>Indonesian</option>
<option value=ga>Irish</option>
<option value=it>Italian</option>
<option value=ja>Japanese</option>
<option value=jw>Javanese</option>
<option value=kn>Kannada</option>
<option value=kk>Kazakh</option>
<option value=km>Khmer</option>
<option value=ko>Korean</option>
<option value=ku>Kurdish (Kurmanji)</option>
<option value=ky>Kyrgyz</option>
<option value=lo>Lao</option>
<option value=la>Latin</option>
<option value=lv>Latvian</option>
<option value=lt>Lithuanian</option>
<option value=lb>Luxembourgish</option>
<option value=mk>Macedonian</option>
<option value=mg>Malagasy</option>
<option value=ms>Malay</option>
<option value=ml>Malayalam</option>
<option value=mt>Maltese</option>
<option value=mi>Maori</option>
<option value=mr>Marathi</option>
<option value=mn>Mongolian</option>
<option value=my>Myanmar (Burmese)</option>
<option value=ne>Nepali</option>
<option value=no>Norwegian</option>
<option value=ps>Pashto</option>
<option value=fa>Persian</option>
<option value=pl>Polish</option>
<option value=pt>Portuguese</option>
<option value=pa>Punjabi</option>
<option value=ro>Romanian</option>
<option value=ru>Russian</option>
<option value=sm>Samoan</option>
<option value=gd>Scots Gaelic</option>
<option value=sr>Serbian</option>
<option value=st>Sesotho</option>
<option value=sn>Shona</option>
<option value=sd>Sindhi</option>
<option value=si>Sinhala</option>
<option value=sk>Slovak</option>
<option value=sl>Slovenian</option>
<option value=so>Somali</option>
<option value=es>Spanish</option>
<option value=su>Sundanese</option>
<option value=sw>Swahili</option>
<option value=sv>Swedish</option>
<option value=tg>Tajik</option>
<option value=ta>Tamil</option>
<option value=te>Telugu</option>
<option value=th>Thai</option>
<option value=tr>Turkish</option>
<option value=uk>Ukrainian</option>
<option value=ur>Urdu</option>
<option value=uz>Uzbek</option>
<option value=vi>Vietnamese</option>
<option value=cy>Welsh</option>
<option value=xh>Xhosa</option>
<option value=yi>Yiddish</option>
<option value=yo>Yoruba</option>
<option value=zu>Zulu</option>
</select>
Not sure where this question DOES belong but the best resource I can find actually : ISO 639.2
Codes arranged alphabetically by alpha-3/ISO 639-2 Code
Contains the French translation for all Languages provided.
Im not sure you will get a more concise list.
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">
We have a dropdown(html select) which contains number from 00 to 59 (possible value for minutes). When control is on focus and user input 13 (or 24 or 59 etc) using key board, it selects the number 13 (or 24 or 59 etc) in the control. Which is expected behavior.
But when user input number like 44 it selects 40 then 41. Same is the issue with 22,33,55.
This is the behavior with Firefox, Chrome, Safari. Interestingly in IE9 it is working fine(you input 44 it selects 44)
Please suggest how to make the behavior of "html select" uniform in all the browser. Preferably the way it is working in IE9, which seems correct.
Example code:
<html>
<body>
Select Minutes:
<select id="hr_sel_min">
<option title="00" value="00" selected="selected">00</option>
<option title="01" value="01">01</option>
<option title="02" value="02">02</option>
<option title="03" value="03">03</option>
<option title="04" value="04">04</option>
<option title="05" value="05">05</option>
<option title="06" value="06">06</option>
<option title="07" value="07">07</option>
<option title="08" value="08">08</option>
<option title="09" value="09">09</option>
<option title="10" value="10">10</option>
<option title="11" value="11">11</option>
<option title="12" value="12">12</option>
<option title="13" value="13">13</option>
<option title="14" value="14">14</option>
<option title="15" value="15">15</option>
<option title="16" value="16">16</option>
<option title="17" value="17">17</option>
<option title="18" value="18">18</option>
<option title="19" value="19">19</option>
<option title="20" value="20">20</option>
<option title="21" value="21">21</option>
<option title="22" value="22">22</option>
<option title="23" value="23">23</option>
<option title="24" value="24">24</option>
<option title="25" value="25">25</option>
<option title="26" value="26">26</option>
<option title="27" value="27">27</option>
<option title="28" value="28">28</option>
<option title="29" value="29">29</option>
<option title="30" value="30">30</option>
<option title="31" value="31">31</option>
<option title="32" value="32">32</option>
<option title="33" value="33">33</option>
<option title="34" value="34">34</option>
<option title="35" value="35">35</option>
<option title="36" value="36">36</option>
<option title="37" value="37">37</option>
<option title="38" value="38">38</option>
<option title="39" value="39">39</option>
<option title="40" value="40">40</option>
<option title="41" value="41">41</option>
<option title="42" value="42">42</option>
<option title="43" value="43">43</option>
<option title="44" value="44">44</option>
<option title="45" value="45">45</option>
<option title="46" value="46">46</option>
<option title="47" value="47">47</option>
<option title="48" value="48">48</option>
<option title="49" value="49">49</option>
<option title="50" value="50">50</option>
<option title="51" value="51">51</option>
<option title="52" value="52">52</option>
<option title="53" value="53">53</option>
<option title="54" value="54">54</option>
<option title="55" value="55">55</option>
<option title="56" value="56">56</option>
<option title="57" value="57">57</option>
<option title="58" value="58">58</option>
<option title="59" value="59">59</option>
</select> minutes
</body>
</html>
Please find the example code in jsFiddle: http://jsfiddle.net/2QTvJ/
(open the example in IE9 and chrome to see the difference.)
As Raheel was saying, it goes up to the next value starting with the character that you hit, 4 or 5, for example. You could have a text box input that then changes the drop down value or some other type of form element that would distinguish the value.
Another way would be to distinguish value with jquery keypress function.
http://api.jquery.com/keypress/
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>