javascript - Make the selected option uppercase in a dropdown using vanilla JS -

-

i need make text uppercase on selected option only in <select>. found working example using jquery need convert vanilla js.

i've got pretty close, when choose option, makes selected value uppercase. when choose another, leaves previous option uppercase also.

i can't figure out how "capitalise options except selected option, uppercase".

any guidance appreciated.

here working fiddle of far.

how using css

* {    font-family: arial;  }    select option {    text-transform: capitalize;  }    select, select option:checked {      text-transform: uppercase;  }
<select name="title" id="title">      <option selected="" disabled="">categories</option>      <option value="photo-galleries">photo galleries</option>      <option value="photography">photography</option>      <option value="romeo-juliet">romeo &amp; juliet</option>      <option value="swan-lake">swan lake</option>      <option value="symmetries">symmetries</option>  </select>    <select name="day" id="day">      <option selected="" disabled="">day of week</option>      <option value="monday">monday</option>      <option value="tuesday">tuesday</option>      <option value="wednesday">wednesday</option>      <option value="thursday">thursday</option>      <option value="friday">friday</option>      <option value="saturday">saturday</option>      <option value="sunday">sunday</option>  </select>

here's javascript version well

[].slice.call( document.queryselectorall('option') ).foreach(ucfirst);  document.getelementbyid('title').addeventlistener('change', fn, false); document.getelementbyid('day').addeventlistener('change', fn, false);  function ucfirst(el) {     el.innerhtml = el.innerhtml.charat(0).touppercase() + el.innerhtml.slice(1).tolowercase(); }  function fn() {     var options  = this.getelementsbytagname('option');     var selected = options[this.selectedindex];      [].slice.call(options).foreach(ucfirst);     selected.value = selected.innerhtml = selected.innerhtml.touppercase(); }

fiddle


Comments

Post a Comment

Popular posts from this blog

Delphi XE2 Indy10 udp client-server interchange using SendBuffer-ReceiveBuffer -

-
i use delphi xe2 , indy10 udp protocol. can't receive server echo on client side if use receivebuffer method. got "socket error # 10040" although send small echo message server client. console application illustrate problem below. in advance. program project1; {$apptype console} {$r *.res} uses system.sysutils, idglobal, idbasecomponent, idcomponent, idsockethandle, idudpclient, idudpserver, idudpbase, idstack; type tudp_serv = class(tidudpserver) procedure udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); end; var udpserver: tudp_serv; udpcl: tidudpclient; bsnd, brcv: tbytes; s: string; k: integer; //============================================================================== procedure tudp_serv.udpsvudpread(athread: tidudplistenerthread; adata: tidbytes; abinding: tidsockethandle); begin writeln(' server read: ' + tohex(adata, length(adata))); abinding sendto(peerip, peerport, adat...
Read more

Qt ActiveX WMI QAxBase::dynamicCallHelper: ItemIndex(int): No such property in -

-
i new windows programming. here goes code objiwbemlocator = new qaxobject("wbemscripting.swbemlocator"); objwmiservice = objiwbemlocator->querysubobject("connectserver(qstring&,qstring&)",qstring("."),qstring("root\\cimv2")); qaxobject* returnlist = objwmiservice->querysubobject("execquery(qstring&)", qstring("select * %1").arg(domain)); qaxobject* result = returnlist->querysubobject("itemindex(int)", 0); i getting error on runtime qt activex wmi qaxbase::dynamiccallhelper: itemindex(int): no such property in but itemindex method exists msdn says the itemindex method not work collections not contain swbemobjects, such swbemmethodset, swbemnamedvalueset, swbemprivilegeset, swbempropertyset, , swbemqualifierset. what selecting ? have tried iterating on collection ? plus need minimum windows vista itemindex method. hope helps
Read more

Enable autocomplete or intellisense in Atom editor for PHP -

-
i'm first time user of atom editor php code. atom can autocomplete built-in functions of php. possible make editor autocomplete custom function written in separate file? function.php <?php function printsomething() { echo "hello world"; } index.php <?php require_once "function.php"; printsomething(); // autocompleted atom editor while typing thanks in advance. there text file in %userprofile%.atom called snippets.cson. in there can add snippet. more this: http://flight-manual.atom.io/using-atom/sections/snippets/ but need think can use later on other files well. otherwise need copy , paste.
Read more