Question

我正试图根据select值来显示不同的数据。 select处于Bootstrap模式，我通过运行循环来显示不同的产品。尽管我认为现在可能需要运行一个来显示数据，但我已经拥有了不需要运行AJAX请求的所有数据。

我想做的是：

如果选择row['size_sm']，则从small输出库存量；如果选择row[size_lg]，则从large输出库存量。
li> 如果尺寸不足，请隐藏
隐藏size。我的方法似乎不起作用，因为即使在缺货的情况下，选项仍然会显示。

这是我的代码。我正在通过链接中的div类传递来自数据库的值，这些链接被单击以打开模态，该模态在页面上没有显示，因为它们为空，但似乎不适用于库存量。

我不是很了解AJAX，如果那是解决问题的办法，那我就被困住了。我在这里最好的路线是什么？我真的不想再次构建整个模态，因为我体内有一个旋转木马，可以很好地显示数据库中的pic1，pic2，pic3。

$(document).ready(function() {
  $(".t_shirt_pic_main").on('click', function() {
    //   // get the title of current item and add to modal from the "value" of the item a link that opens modal
    var title = $(this).attr("value");

    // get the image by going inside the a link to the image.. faster than first child   
    var main_pic = $(this).find('.main_img').attr('src');
    var second_pic = $(this).find('.pic2').attr('rel');
    var third_pic = $(this).find('.pic3').attr('rel');
    var price = $(this).find('.price').attr('rel');

    var stock_xl = $(this).find('.stock_xl').attr('rel');
    var stock_lg = $(this).find('.stock_lg').attr('rel');
    var stock_md = $(this).find('.stock_md').attr('rel');
    var stock_sm = $(this).find('.stock_sm').attr('rel');

    // get the title of current item and add to modal from the "value" of the item a link
    $("#modal_title").text(title);

    // change modal pics to the ones from the clicked on item getting values from hidden inputs 
    $("#first_slide").attr('src', main_pic);
    $("#second_slide").attr('src', second_pic);
    $("#third_slide").attr('src', third_pic);

    // add price in the bottom of modal
    $('#modal_price').html('£' + price);

    if (stock_sm == 0) {
      $('#option_small').hide()
    }

    if (stock_sm != 0) {
      $('#option_small').show()
    }

    if (stock_md == 0) {
      $('#option_medium').hide()
    }

    if (stock_md != 0) {
      $('#option_small').show()
    }

    if (stock_lg == 0) {
      $('#option_large').toggle()
    }

    if (stock_lg != 0) {
      $('#option_large').show()
    }

    if (stock_xl == 0) {
      $('#option_extralarge').toggle()
    }

    if (stock_xl != 0) {
      $('#option_extralarge').show()
    }

    $("#t_shirt_and_jumper_modal").modal('show');
  });

});

while($row = mysqli_fetch_assoc($result)){ ?>
  <div class="col-lg-3 col-md-6 products">
    <a class="t_shirt_pic_main" href="javascript:void(0)" value="<?php echo $row['title'] ?>" rel="<?php echo $row['id'] ?>">
      <!-- hidden values to pass to jquery for the modal -->
      <div class="stock_xl" rel="<?php echo  $row['size_xl'] ?>"></div>
      <div class="stock_lg" rel="<?php echo $row['size_lg'] ?>"></div>
      <div class="stock_md" rel="<?php echo    $row['size_md']; ?>"></div>
      <div class="stock_sm" rel="<?php echo $row['size_sm'] ?> "></div>
      <div class="pic2" rel="<?php echo $row['image_2'] ?>"></div>
      <div class="pic3" rel="<?php echo $row['image_3'] ?>"></div>
      <div class="price" rel="<?php echo $row['price'] ?>"></div>
      <img class="img-fluid main_img" src="<?php echo $row['image_1'] ?> ">
    </a>
    <h5 class="item_title"><?php echo $row['title'] ?></h5>
    <p class="price_para">£<?php echo $row['price'] ?></p>
  </div>
  <?php include "includes/t_shirt_and_jumper_modal.php" ?>
<?php } ?>

<!-- Here is the modal i thought it would be easier to read putting it underneath instead of in the loop -->
<div class="modal-footer">
  <form action="basket.php" method="post">
    <div class="form-group">
      <label for="size">Size</label>
        <? here i would like to hide the size from the select if the stock is empty ?>
        <select name="size" id="size">
          <option id="option_small" value="sm">small</option>
          <option id="option_medium" value="md">medium <span id="available"></span></s>
          </option>
          <option id="option_large" value="lg">large <span id="available"></span></s>
          </option>
          <option id="option_extralarge" value="xl">x-large <span id="available"></span></s>
          </option>
        </select>
    </div>

    <? HERE IS WHERE I WANT THE INFO $row[size_selected] to display once i choose a size. ?>
      <p> Available: <span id="available"> </span> </p>
      <div class="form-group">
        <label for="quantity">Quantity</label>
        <input type="text" id="quantity" name="quantity"> <br>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary"> Add to basket <i class="fa fa-shopping-basket" aria-hidden="true"></i></button>
      </div>
  </form>
</div>
</div>
</div>

Answer 1

现在排序了，我不需要ajax调用就可以做到这一点，只是通过div属性传递值，它仍然保留了最后单击的项的ID，因为它处于循环状态，我可以用我在选择时使用jquery和javascript更改以显示库存数量，并在关闭时使用.remove清除上一个项目的模态，这是我使用的代码，以防其他人遇到相同的问题`//大小 $（'＃size'）。change（function（）{

history | grep "docker run"

基于选择值的AJAX调用

1 个答案: