0
在下面的代碼中，我有兩個下拉列表，單元類型和單元大小。我有兩個單位價格和行總數需要更新，首先在頁面加載時，然後每當一個或兩個下拉列表發生更改時。JQUERY根據選擇選項更改div內容 - 我迷路了
問題是，我是新來的Javascript和JQuery，真的不知道我在做什麼，沒有任何我試過的例子似乎爲我工作。我希望這裏有人能指出我的問題在哪裏，以及如何使它工作？
<?php
session_start();
include '../include/search.php';
$dbserver = '#########';
$dbname = '########';
$dbuser = '########';
$dbpassword = '#########';
$category = $_GET['category'];
$db = mysqli_connect($dbserver, $dbuser, $dbpassword, $dbname);
if (mysqli_connect_errno()) {
die("Connection failed: " . mysqli_connect_error());
}
mysqli_select_db($db, $dbname);
$sql = "SELECT * FROM products WHERE category = '".$category."'";
$result = mysqli_query($db, $sql);
if (!$result) {
die ('Error: Could not select products'.mysqli_error($db));
}
function make_size_select($product) {
echo '<select name="unit_menu">';
$price_set = array(
'halfpint'=>$product['halfpint'],
'pint'=>$product['pint'],
'dk'=>$product['dk'],
'quart'=>$product['quart']);
$handles = array(
'halfpint'=>'Half Pint (8 oz)',
'pint'=>'Pint (16 oz)',
'dk'=>'Dutch Kettle (16 oz)',
'quart'=>'Quart (32 oz)');
$i = 0;
foreach ($price_set as $key=>$value) {
if ($value > 0.00) {
$i++;
if ($i == 1) {
echo '<option value="'.$value.'" selected="selected">'.$handles[$key].'</option>';
} else {
echo '<option value="'.$value.'">'.$handles[$key].'</option>';
}
}
}
echo '</select>';
}
function category_select($product) {
$categories = array();
foreach ($product as $row) {
if (!in_array($row['category'], $categories)) {
array_push($row['category']);
}
}
echo '<select name="categories" onChange="loadNewCategory();">';
foreach ($categories as $category) {
echo '<option '.$category.'>'.ucfirst($category);
}
echo '</select>';
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Smoky Mountain Honey House</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="../css/custom.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="../js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="../js/menu.js"></script>
</head>
<body>
<!----start-header----->
<div class="header_img">
<img src="../images/header_img.jpg" alt="" />
<div class="wrap">
<div class="header">
<div class="logo">
<a href="index.html"><img src="../images/logo.png" alt=""></a>
</div>
<div class="menu">
<nav class="clearfix">
<ul class="clearfix">
<li class="active"><a href="../index.html">HOME</a></li>
<li><a href="../about.html">ABOUT</a></li>
<li><a href="../contact.html#map">LOCATIONS</a></li>
<li><a href="../store.html">SHOP</a></li>
<li><a href="../contact.html">CONTACT</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
</div>
</div>
</div>
</div>
<!----End-header----->
<div class="wrap">
<div class="content">
<div class="category-header">
<h2><?php echo ucfirst($category); ?></h2>
<!-- <div class="product-search">
<p>
Search our inventory: <form name="search" action="../include/functions.php?method=search" method="post">
<input type="text" name="search_terms" />
<input type="submit" value="submit" />
</form>
</p>
</div> -->
</div>
<?php
while ($product = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
// display product ?>
<div class="product_row">
<script>
var product = <?php echo json_encode($product); ?>
</script>
<form name="order_row_<?php echo $product['product_id']; ?>" action="#" method="post">
<div class="product_id">
<input type="hidden" name="product_id" value="<?php echo $product['product_id']; ?>">
<?php echo ucfirst($product['name']); ?>
</div>
<div class="type">
<select name="unit_type">
<option value="ind" selected>By the Jar</option>
<option value="case">By the Case</option>
</select>
</div>
<div class="unit">
<?php echo make_size_select($product); ?>
</div>
<div class="unit-price">
</div>
<div class="qty">
<input type="number" name="qty" min="0" maxlength="5" max="11" label="How many?" />
</div>
<div class="row-price"></div>
<div class="add_cell">
<button class="add-to-cart" onclick="addToCart();">Add To Cart</button>
</div>
</form>
</div>
<?php }; ?>
</div>
</div>
<div class="copy-right">
<p>© 2016 Smoky Mountain Honey House</p>
</div>
</div>
<!---End-footer---->
<script>
$(".unit_type").change(function() {
var unitPrice = $(this).val();
if ($(this).closest.(".unit_type") == "ind") {
unitPrice = unitPrice/12.00;
}
$(this).closest.(".unit-price").text(unitPrice);
})
.change();
</script>
</body>
</html>