character of each word should capital from jquery

Question

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.

Answer 1

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>

• Capitalize words in string

Answer 2

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");