Clever Geek Handbook

Use the HTML <option> attribute of the selected attribute

I'm trying to use the selected HTML attribute but doesn't work!

<option value="${city}" style="text-transform: capitalize"> ${fn:toLowerCase(city)}</option>
+3


source to share


2 answers


As mentioned in the comments on the CSS method suggestion text-transform

, it looks like there is an inconsistency with Chrome. While scouring the web, this seems to be a known issue at some point. See here and here for more details . Not sure how long this has been known, maybe even resolved at some point, but for Chrome version 43.0.2357.124m on Windows I can still replicate this issue - see bezel cover as well

If the consistency of Chrome is substantial enough, you can work around this with some JavaScript. Some examples might include ...

jQuery - JSFiddle Example

$('option').each(function() {
    $(this).text($(this).text().replace(/^(.)|\s(.)/g, function($1){ return $1.toUpperCase(); }));
});


Vanilla - JSFiddle Example

var ele = document.getElementsByTagName('OPTION')

for(var i = 0; i < ele.length; i += 1) {
    ele[i].text = ele[i].text.replace(/^(.)|\s(.)/g, function($1){ return $1.toUpperCase(); })
}
+2


source


You can set it on an item <select>

.



<select style="text-transform: capitalize">
    <option value="volvo">volvo</option>
    <option value="saab">saab</option>
    <option value="opel">opel</option>
    <option value="audi">audi</option>
</select>
Run code


+2


source






More articles:


All Articles