使用jQuery选择列表值更改，但不会在UI中显示

Question

Hy everyone, I get a problem when changing select list option in jQuery, everything is working fine outside this theme. when I create the select list in this theme it is changing select list like. theme name is developr

My code :

<select id="PackageID" name="PackageID" class="validate[required] withClearFunctions" style="width:200px" >
  <option value="">Please select</option>
  <option value="1">100 paper</option>
  <option value="2">500 paper</option>
</select>

What I got after rander

<span class="drop-down custom-scroll">
  <span class="selected">Please select</span>
  <span>100 paper</span>
  <span>500 paper</span>
  <div class="custom-vscrollbar" style="display: none;"><div></div></div>                           
</span>

when I change option in jQuery html changes but UI does not change.

Code after selecting select list

<span class="drop-down custom-scroll">
  <span>Please select</span>
  <span class="selected">100 paper</span>
  <span>500 paper</span>
  <div class="custom-vscrollbar" style="display: none;"><div>
</span>

Answer 1

I solve the problem. I just firing the change event using jQuery

$('#PackageID').change();

this event update UI.

Answer 2

There are several ways to set option without a select drop down. See fiddle for the most terse/readable option

JSFiddle

Option 1:

$('#PackageID').val('2'); 

Option 2 - via index:

$('#PackageID :nth-child(1)').prop('selected', true);

Option 3 - via value:

$('#PackageID option:eq(2)').prop('selected', true);

All will update DOM and therefore render correctly.