Question

I tried to re-style the select option,
however the option’s value doesn’t pass to the new class created by jQuery.
Thus, I am unable to get the right result.
The correct result is when I click US, it shows Austin, when click Germany shows Berlin

Here is the code,
http://jsfiddle.net/xvDbv/1/

Should change to something like

   text: $this.children('option','value').eq(i).text()?

could someone help with the VALUE pass problem?

Many thanks in adv

Answer 1

This is because you never call the countrySelectChanged function when you build you pseudo select. Add a call to it in the function:

$listItems.click(function(e) {
    e.stopPropagation();
    $styledSelect.text($(this).text()).removeClass('active');
    $this.val($(this).attr('rel'));
    $list.hide(); /* alert($this.val()); Uncomment this for demonstration! */
    countrySelectChanged();
});

jsFiddle example