CODEWITHSUNDEEP
javascriptjquery
olo
olo

Reputation: 5271

jQuery value pass

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

Upvotes: 1

Views: 79

Answers (2)

JoeFletch
JoeFletch

Reputation: 3960

I added the on listener to the li.

    $('<li />', {
        text: $this.children('option').eq(i).text(),
        rel: $this.children('option').eq(i).val()
    }).on("click", function(){
        $(".hide").hide();
        $("#" + $(this).text().toLowerCase() + "-select").show();
    }).appendTo($list);

jsFiddle

Upvotes: 1

j08691
j08691

Reputation: 207861

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

Upvotes: 2

Related Questions