My HTML:
<select id="start_time">
<option value="00:00">0:00</option>
<option value="00:30">0:30</option>
<option value="01:00">1:00</option>
<option value="01:30">1:30</option>
<option value="02:00">2:00</option>
<option value="02:30">2:30</option>
<option value="03:00">3:00</option>
<option value="03:30">3:30</option>
<option value="04:00">4:00</option>
<option value="04:30">4:30</option>
<option value="05:00">5:00</option>
<option value="05:30">5:30</option>
<option value="06:00">6:00</option>
<option value="06:30">6:30</option>
<option value="07:00">7:00</option>
<option value="07:30">7:30</option>
<option value="08:00">8:00</option>
<option value="08:30">8:30</option>
<option value="09:00">9:00</option>
<option value="09:30">9:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:30">14:30</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
<option value="20:30">20:30</option>
<option value="21:00">21:00</option>
<option value="21:30">21:30</option>
<option value="22:00">22:00</option>
<option value="22:30">22:30</option>
<option value="23:00">23:00</option>
<option value="23:30">23:30</option>
</select>
JS Fiddle.
When you run this, if the user opens the dropdown box the cursor doesn't turn blue in the last box.
Is this a Chrome bug? Or is there a change I needed to correct it?
Yes, it is a Chrome 32 bug. The issue in Chromium bugtracker.
It's a chrome bug ;-), i was brainfarting about it too :p!
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....
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.
<select id="byplanname" name="byplanname" style="display:none;">
<option value="Select Plan Name" multiple="multiple">Select Plan Name</option>
<option value="815" href="#page_3">815</option>
<option value="816">816</option>
<option value="816">817</option>
<option value="818">818</option>
<option value="820">820</option>
<option value="821">821</option>
<option value="822">822</option>
<option value="823">823</option>
<option value="904">904</option>
</select>
The href="#page_3" is not working ,Please tell me proper linking in intel xdk..thanx
Try something like this:
<select id="byplanname" name="byplanname" onchange="location = this.options[this.selectedIndex].value;">
<option value="google.com">815</option>
<option value="google.com">816</option>
<option value="google.com">817</option>
<option value="google.com">818</option>
<option value="google.com">820</option>
<option value="google.com">821</option>
<option value="google.com">822</option>
<option value="google.com">823</option>
<option value="google.com">904</option>
</select>
For using #page_3 you will have to put in your URL before that so it would be website.com/#page3 in the value field
JSFiddle:
http://jsfiddle.net/fqB3Z/
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/