Reputation: 112
i have dropdownlist containing few values i am applying css(for capitalize character of each word) dynamically from jquery but result not comming as expected only selected value are affected. drop donw list with value
<select id="pList" class="formSelectCity form-control">
<option value="65064">swastik-cottage</option>
<option value="65063">snow-crown-cottage</option>
<option value="65009">white-pearl-cottage</option>
<option value="65061">rana-cottage</option>
<option value="65097">hill-view-cottage</option>
<option value="65103">arjun-kutir-cottage</option>
</select>
jquery
$('#pList').css("text-transform","capitalize");
also i want to remove all hyphens"-" with space" " in all options value.
Upvotes: 0
Views: 141
Reputation: 128
You can just replace hyphens with spaces before changing the CSS:
$('#pList option').each(function(){
$(this).html($(this).html().replace(/-/g," "));
});
$('#pList').css("text-transform","capitalize");
Upvotes: 1
Reputation: 388316
I think you will have to replace the text of each option
$('#pList option').text(function (i, text) {
return text.replace(/-/g, ' ').replace(/(?:^|\s)\S/g, function (a) {
return a.toUpperCase();
});
});
$('#pList option').text(function(i, text) {
return text.replace(/-/g, ' ').replace(/(?:^|\s)\S/g, function(a) {
return a.toUpperCase();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="pList" class="formSelectCity form-control">
<option value="65064">swastik-cottage</option>
<option value="65063">snow-crown-cottage</option>
<option value="65009">white-pearl-cottage</option>
<option value="65061">rana-cottage</option>
<option value="65097">hill-view-cottage</option>
<option value="65103">arjun-kutir-cottage</option>
</select>
Upvotes: 4