1

HTML select list with height values as follows. When button btn-change-height clicked i want to change select value as 500 and text as 5'0". but text is not changing. why? 

$("#btn-change-height").click(function() {
    $("#heightSelect1").val('5\' 0\"').change();  
});

<select class="btn nav-height-select" id="heightSelect1" autocomplete="off">
    <option value="400">4' 0"</option>
    <option value="401">4' 1"</option>
    <option value="402">4' 2"</option>
    <option value="403">4' 3"</option>
    <option value="404">4' 4"</option>
    <option value="405">4' 5"</option>
    <option value="406">4' 6"</option>
    <option value="407">4' 7"</option>
    <option value="408">4' 8"</option>
    <option value="409">4' 9"</option>
    <option value="410" selected="selected">4'10"</option>
    <option value="411">4'11"</option>
    <option value="500">5' 0"</option>
</select>
Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
Geeth Welagedara
  • 614
  • 1
  • 8
  • 24

1 Answers1

2

You should use value of option to select it so your code should be :

$("#heightSelect1").val('500').change();

If you want to select option with text 5' 0".

Hope this helps.

Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101