Sunil Khankriyal
Sunil Khankriyal

Reputation: 112

character of each word should capital from jquery

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

Answers (2)

avdhut
avdhut

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

Arun P Johny
Arun P Johny

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

Related Questions