JQuery Onclick 显示选择的信息

Question

我想在下拉列表slideingDiv 上显示选定的price、category 和size。但是我在下面所做的不起作用。我尝试回显以查看数据是否已发送，但我一无所获。我的代码有什么问题吗？

脚本

<script type="text/javascript">
$(document).ready(function () {
    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function () {
        $(".slidingDiv").slideToggle();
    });
});
</script>

按钮

<button a href="product.php?ProdID=<?php echo $id; ?>" class="show_hide" id="button" name="button">Add to cart</a></button>

PHP

<?php
                    dbconnect();
                    if(isset($_POST['pid']) && isset($_POST['length']) && isset($_POST['Qty']) &&     `isset($_POST['Category'])){`  
            $pid = $_POST['pid'];
            $length = $_POST["length"];
            $qty = $_POST['Qty'];
            $Category = $_POST['Category'];

            echo $pid;     // I have add this echo to see data have been passed though but i get nothing in return
            echo $length; 

                $stmt4 = $conn->prepare("
                SELECT Product.Name as ProductName, Category.Name, size, Price
                FROM item_Product, Product, Category
                WHERE Product.ProdID =:pid
                AND size= :length  AND Category.Name = :Category Limit  1");
                $stmt4->bindParam('pid',$pid);
                $stmt4->bindParam('length',$length); 
                $stmt4->bindParam('Category',$Category); 
                $stmt4->execute();
                foreach ($stmt4->fetchAll(PDO::FETCH_ASSOC) as $row4 ) {
                $product_name = $row4["ProductName"];
                $price = $row4["Price"];
                $length = $row4["size"];    
                $Category = $row4["Name"];

                ?>

                Item was added shopping bag </br>
                Name:<?php echo $row4['ProductName']; ?> </br>
                Length:<?php echo $row4['size']; ?> </br>
                Category:<?php echo $row4['Name']; ?> </br>
                Price:<?php echo $row4['Price']; ?> </br>

                <?php } } 
                ?>
                <a href="cart.php">View Cart</a>
                </div>

表格

<td width="160">Price:</td>
                echo '<td name="pricetag" id="pricetag">'.$row2['Price'].'</td>';

</tr>
    <tr>    
<td>Category</td>   
    <td>
<select id="Category" name="Category">
        echo '<option value="'.$row['Name'].'">'.$row['Name'].'</option>';

</select>
</td>
</tr>

     <tr>
    <td width="160">Length:</td>
                        <td>
    <select name="length" id="length">

<option SELECTED value="'.$row3['size'].'">'.$row3['size'].</option>

</select>
</td>
    </tr>
        <tr>
            <td>Quantity</td>
                        <td><input type="text" name="Qty" id="Qty" value="1" style="width: 20px; text-align: right" /></td>

                    </tr>       
                </table>    
                <div class="cleaner h20"></div>
                <input type="hidden" name="pid" id="pid" value="<?php echo $id; ?>" />
                <div class="button">
                <button class="show_hide" id="button" name="button">Add to cart</button>
                </div>

Answer 1

试试这个：SEE MY FIDDLE

HTML

    <table>
    <tr>
        <td>Price</td>
        <td>
        <select id='priceTag'>
            <option value='p1'>price 1</option>
            <option value='p2'>price 2</option>
        </select>
        </td>
    </tr>
    <tr>
        <td>Category</td>
        <td>
        <select id='Category'>
            <option value='c1'>cat 1</option>
            <option value='c2'>cat 2</option>
        </select>
        </td>
    </tr>
    <tr>
        <td>Size</td>
        <td>
        <select id='Size'>
            <option value='s1'>size 1</option>
            <option value='s2'>size 2</option>
        </select>
        </td>
    </tr>
</table>
<button id='button'>Submit</button>
<div id='selected'>
    <table cellpadding="5" border='1'>
        <tr>
            <td>Price:</td>
            <td id='sprice'></td>
        </tr>
        <tr>
            <td>Category:</td>
            <td id='scat'></td>
        </tr>
        <tr>
            <td>Size:</td>
            <td id='ssize'></td>
        </tr>
    </table>
</div>

JQuery

$(document).ready(function()
{
    $('#selected').hide();
    $('#button').click(function()
    {
        var price = $('#priceTag').val();
        var cat = $('#Category').val();
        var size = $('#Size').val();

        $('#sprice').text(price);
        $('#scat').text(cat);
        $('#ssize').text(size);

        $('#selected').slideDown();
    });
});