Question

I have a select list skinned by a jquery plugin. the problem is that when I choose a select element, the value of the select field before post id val() and I want it to be the html() between . but if I put html() instead of val() I get the entire html of the select list optgroup.

the part of the jquery where I have problems:

$(this).height(selectBoxHeight).change(function(){
    selectBoxSpanInner.text($(this).val()).parent().addClass('changed');
});

(here I set the val)
and the html:

<select name="123_cat" class ="styled">  
   <?php foreach($subcategories['categories'] as $sc) { ?>
   <optgroup label="<?php echo $sc['name']; ?>">
    <?php foreach ($sc['subcategories'] as $ss){?>                              
             <option id = "123_cat[]" value="<?php echo $ss['sid']; ?>" <?php if (isset($_POST['123_cat'])) { if($ss['sid'] == $_POST['123_cat']) echo 'selected = "selected"';} else { if(in_array($ss['sid'], $the_subcategories)) echo 'selected = "selected"'; } ?>><?php echo $ss['name']; ?></option>
        <?php }?>

How can I get the text between <option> </option> selected onclick instead of the value of it?

Answer 1

Have you tried using

$("option:selected", this).text()