堆棧內存溢出
  簡體   English   中英

單擊添加按鈕 php 從第二個下拉列表中刪除/禁用所選選項[從第一個下拉列表中選擇]

[英]Remove / disable selected option[selected from first dropdown] from second dropdown on clicking add button php

 原文  2019-12-19 13:22:37  3   1    php/ jquery

問題描述

索引.php

<?php
//index.php

$connect = new PDO("mysql:host=localhost;dbname=test", "root", "");
function fill_unit_select_box($connect)
{ 
 $output = '';
 $query = "SELECT * FROM tbl_unit ORDER BY unit_name ASC";
 $statement = $connect->prepare($query);
 $statement->execute();
 $result = $statement->fetchAll();
 foreach($result as $row)
 {
  $output .= '<option value="'.$row["unit_name"].'">'.$row["unit_name"].'</option>';
 }
 return $output;
}

?>
<!DOCTYPE html>
<html>
 <head>
  <title>Add Remove Select Box Fields Dynamically using jQuery Ajax in PHP</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
  <br />
  <div class="container">
   <h3 align="center">Add Remove Select Box Fields Dynamically using jQuery Ajax in PHP</h3>
   <br />
   <h4 align="center">Enter Item Details</h4>
   <br />
   <form method="post" id="insert_form">
    <div class="table-repsonsive">
     <span id="error"></span>
     <table class="table table-bordered" id="item_table">
      <tr>
       <th>Enter Item Name</th>
       <th>Enter Quantity</th>
       <th>Select Unit</th>
       <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
      </tr>
     </table>
     <div align="center">
      <input type="submit" name="submit" class="btn btn-info" value="Insert" />
     </div>
    </div>
   </form>
  </div>
 </body>
</html>

<script>
$(document).ready(function(){

 $(document).on('click', '.add', function(){
  var html = '';
  html += '<tr>';
  html += '<td><input type="text" name="item_name[]" class="form-control item_name" /></td>';
  html += '<td><input type="text" name="item_quantity[]" class="form-control item_quantity" /></td>';
  html += '<td><select name="item_unit[]" class="form-control item_unit"><option value="">Select Unit</option><?php echo fill_unit_select_box($connect); ?></select></td>';
  html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
  $('#item_table').append(html);
 });

 $(document).on('click', '.remove', function(){
  $(this).closest('tr').remove();
 });

 $('#insert_form').on('submit', function(event){
  event.preventDefault();
  var error = '';
  $('.item_name').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Enter Item Name at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });

  $('.item_quantity').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Enter Item Quantity at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });

  $('.item_unit').each(function(){
   var count = 1;
   if($(this).val() == '')
   {
    error += "<p>Select Unit at "+count+" Row</p>";
    return false;
   }
   count = count + 1;
  });
  var form_data = $(this).serialize();
  if(error == '')
  {
   $.ajax({
    url:"insert.php",
    method:"POST",
    data:form_data,
    success:function(data)
    {
     if(data == 'ok')
     {
      $('#item_table').find("tr:gt(0)").remove();
      $('#error').html('<div class="alert alert-success">Item Details Saved</div>');
     }
    }
   });
  }
  else
  {
   $('#error').html('<div class="alert alert-danger">'+error+'</div>');
  }
 });

});
</script>

插入.php

<?php
//insert.php;

if(isset($_POST["item_name"]))
{
 $connect = new PDO("mysql:host=localhost;dbname=test", "root", "");
 $order_id = uniqid();
 for($count = 0; $count < count($_POST["item_name"]); $count++)
 {  
  $query = "INSERT INTO tbl_order_items 
  (order_id, item_name, item_quantity, item_unit) 
  VALUES (:order_id, :item_name, :item_quantity, :item_unit)
  ";
  $statement = $connect->prepare($query);
  $statement->execute(
   array(
    ':order_id'   => $order_id,
    ':item_name'  => $_POST["item_name"][$count], 
    ':item_quantity' => $_POST["item_quantity"][$count], 
    ':item_unit'  => $_POST["item_unit"][$count]
   )
  );
 }
 $result = $statement->fetchAll();
 if(isset($result))
 {
  echo 'ok';
 }
}
?>

這張圖顯示了代碼的輸出

我需要的是：

我不想顯示在第二行的Select Unit下拉列表中的第一行中Select Unit bags選項。

也就是說，我希望用戶從Select Unit下拉列表中只選擇一個選項。 必須限制從Select unit下拉列表中Select unit相同的選項。

1 個解決方案

解決方案1
 1  2019-12-21 11:15:53

看看 jquery 小提琴鏈接： https : //jsfiddle.net/fyxog73t/3/

HTML代碼：

<div class="row">
  <div class="col-md-6">1st Row</div>
  <div class="col-md-6">
    <select id="select_1">
      <option value="">Choose</option>
      <option value="a">A</option>
      <option value="b">B</option>
      <option value="c">C</option>
      <option value="d">D</option>
      <option value="e">E</option>
    </select>
  </div>
</div>
<div class="row">
  <div class="col-md-6">2st Row</div>
  <div class="col-md-6">
    <select id="select_2">
      <option value="">Choose</option>
      <option value="a">A</option>
      <option value="b">B</option>
      <option value="c">C</option>
      <option value="d">D</option>
      <option value="e">E</option>
    </select>
  </div>
</div>
<div class="row">
  <div class="col-md-6">3st Row</div>
  <div class="col-md-6">
    <select id="select_3">
      <option value="">Choose</option>
      <option value="a">A</option>
      <option value="b">B</option>
      <option value="c">C</option>
      <option value="d">D</option>
      <option value="e">E</option>
    </select>
  </div>
</div>

JS代碼：

$(document).on('change', '[id^="select_"]', function(){
    var dropdown_value = $(this).val();
    var dropdown_id = $(this).attr('id');
  // code to update options from other dropdowns excluding currently selected dropdown
    if(dropdown_value != "") {
    $('[id^="select_"]:not([id="'+dropdown_id+'"])').find("option[value='"+dropdown_value+"']").attr('disabled', true);
    }

  // code to check, if any disabled option is present with it's value not present in other dropdown as selected option. If so then removing disabled option for that dropdown
    $('[id^="select_"]:not([id="'+dropdown_id+'"])').find("option[value!='"+dropdown_value+"']:disabled").each(function(){
        dropdown_value = $(this).val();
        dropdown_id = $(this).parent().attr('id');

    if($('[id^="select_"]:not([id="'+dropdown_id+'"])').find("option[value='"+dropdown_value+"']:selected").length == 0) {
            $(this).removeAttr('disabled');
        }
    });
});

已使用以下步驟來實現所需的輸出：

1）關於為每個下拉列表編寫的更改方法。
2）在更改方法中，禁用其他下拉列表的選項，其值與當前下拉列表中的選定選項相同。
3）然后檢查，是否在其他下拉列表（不包括當前選擇的下拉列表）中禁用了任何選項。 檢查該禁用值是否作為其他下拉列表中的選定值存在。 如果未選中，則刪除它的禁用屬性。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 從下拉菜單中未選擇任何選項時禁用按鈕 從下拉列表中刪除選定的選項 php 動態下拉選擇選項服務中的第一個選項，第二個選項將選擇所選服務的醫生。 從mysql / php參考的下拉列表中選擇的選項 從選擇中設置PHP變量 <option>在下拉菜單中 從下拉菜單中突出顯示選定的選項 從 php 中同一文件的下拉列表中獲取選定選項的值？ 使用PHP從數據庫中獲取選定的下拉選項 將PHP表單提交到不同的地址，具體取決於從下拉列表中選擇的選項 PHP / HTML在sql查詢的下拉列表中顯示所選選項
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM