使用jQuery将选择菜单项输出到文本

Question

I'm using a plugin for a Wordpress site called WPShopCart. It won't offer me a way to output the product category as text anywhere; all it wants to do is display the products under that category. However, it does output a drop-down menu to jump to other categories - so it occurred to me that possibly I could use this and simply output the selected option as text. I tried:

<script> $('#category :selected').text(); </script>

To no avail. I found the file in the plugin and this is the markup/php that's written to output the drop-down menu though:

<option value="0" >All</option>
<?php 
    $cat = new WpShopcartProductCategory();
    $cats = $cat->getModels(); 
?>
<?php foreach($cats as $c): ?> 
    <?php 
        $selected='';
        if(isset( $_GET['catid']))
        {
            if( $_GET['catid'] == $c->id)
                $selected =  'selected="selected"';
        }
    ?>
    <option value="<?php echo $c->id ?>"  <?php echo $selected ?> ><?php echo $c->name.'('.$c->getProductCount($c->id).')' ?></option>
<?php endforeach; ?> 

I also tried adding my script directly in the page, in the header and in the footer with no results. Maybe someone can decipher the php markup so I can output the category name elsewhere on the page successfully?

I want to display as a title: Our Products (extracted ID or category title here).

Answer 1

alert( $("#category option:selected").text() );

should give you the category you are after

and

 $(document).ready(function() {
    document.title = $("#category option:selected").text();
 });

will change the title in the browser, if that's what you mean.

Otherwise if you are wanting to change the title in the page, select the element with jquery and change the text like this.

$(document).ready(function() {
    $("h1").text( $("#category option:selected").text() );
});