CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Awais
Awais

Reputation: 93

Select list value change using jQuery but does not shows in UI

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>

Upvotes: 1

Views: 1305

Answers (2)

Awais
Awais

Reputation: 93

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

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

this event update UI.

Upvotes: 2

IronAces
IronAces

Reputation: 1883

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.

Upvotes: 0

Related Questions