文章/答案/技术大牛

发布

社区首页 >问答首页 >JQUERY根据select选项更改div内容--我迷路了

问JQUERY根据select选项更改div内容--我迷路了
EN

Stack Overflow用户

提问于 2017-04-23 03:26:19

回答 1查看 286关注 0票数 0

在下面的代码中，我有两个下拉列表: unit-type和unit-size。我有两个，单价和行合计，需要更新，首先在页面加载时，然后当一个或两个下拉列表更改时。

问题是我是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>&copy; 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>

javascript

jquery

回答 1

Stack Overflow用户

发布于 2017-04-23 04:11:47

jQuery最接近的地方不是查找位于兄弟(或父母的兄弟)中的内容。我会得到最接近的product行，并从中找到子元素。

在每个最近的后面也有一个点。例如：

closest.(".unit-price");

实际上应该是：

closest(".unit-price");

您尝试选择的元素(.unit-type)不包含您要查找的类，而是包含一个名称。一个点(.)在jQuery中表示一个类，散列符号(#)表示一个id。

<select name="unit_type">

应该是：

<select name="unit_type" class="unit_type">

如果您希望能够这样做，请使用以下命令进行选择：

$(".unit_type");

$(".unit-type").change(function() {
  var productRow = $(this).closest(".product_row");
  var price = 5; // get your price here
  var unitPrice;

  if ($(this).val() == "ind") { // $(this).val() contains the value of the selected option 
    unitPrice = price / 12.00;
  } else {
    unitPrice = price / 24.00;   
  }

  productRow.find(".unit-price").text(unitPrice);
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product_row">
  <div class="type">
    <select name="unit_type" class="unit-type">
      <option value="ind" selected>By the Jar</option>
      <option value="case">By the Case</option>
    </select>
  </div>
  <div class="unit-price">

  </div>
</div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43563657

复制

相似问题

问JQUERY根据select选项更改div内容--我迷路了
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQUERY根据select选项更改div内容--我迷路了EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQUERY根据select选项更改div内容--我迷路了
EN