Question

我正在尝试添加主题或不添加Web应用程序类型。当用户在第一个下拉菜单中选择主题时，不应在第二个下拉菜单中显示该主题，并且在第一个下拉菜单中，侧面应有一个按钮（-）来删除所选主题。谁能告诉我如何在Jquery中做到这一点。

代码

    <?php
//index.php

$connect = new PDO("mysql:host=localhost;dbname=testing4", "root", "Lomass");
function fill_unit_select_box($connect)
{ 
 $output = '';
 $query = "SELECT * FROM tbl_unit";
 $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 Subjects</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 Subjects</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>Select Subjects</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><select name="item_unit[]" class="form-control item_unit"><option value="">Select Subject</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>

问题出在这里

see thee problem

Answer 1

$('#firstSelect' ).change(function(){
  var firstValue=$('#firstSelect').val();
  var subjects=['Select Subject', 'Maths', 'History', 'Computer Science'];
  var secondSelect = '<select name="whatever">';
  for (var i=0; i<subjects.length; i++)
  {
    if (firstValue!=subjects[i])
       {
         secondSelect += '<option value="' + subjects[i] + '">' + subjects[i] + '</option>';
       }
   }
  secondSelect += '</select>';
  document.getElementById('secondSelectDiv').innerHTML= secondSelect;
});

有很多方法可以做到这一点。要使用上述方法，请创建第一个下拉列表或选择。在它旁边创建一个ID为“ secondSelectDiv”的空div。页面加载时，您实际上并不需要显示第二个选择，因为您不知道值应该是什么。更改第一个选择时，创建第二个选择，将第一个选择的值省略。选择HTML后，只需将其放在空div中即可。这样做的好处是，如果您只更改第一个选择，第二个将自动更新...不需要减号按钮。如果要创建节点，也可以使用createElement遵循相同的过程。在比较主题时要注意区分大小写。主题值必须在第一次选择和第二次选择/下拉菜单中完全匹配。

$('#firstSelect' ).change(function(){
      var firstValue=$('#firstSelect').val();
      var subjects=['Select Subject', 'Maths', 'History', 'Computer Science'];
      var secondSelect = '<select name="whatever">';
      for (var i=0; i<subjects.length; i++)
      {
        if (firstValue!=subjects[i])
           {
             secondSelect += '<option value="' + subjects[i] + '">' + subjects[i] + '</option>';
           }
       }
      secondSelect += '</select>';
      document.getElementById('secondSelectDiv').innerHTML= secondSelect;
    });

#firstSelect, #secondSelectDiv{
display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="firstSelect">
<option value="Select Subject">Select Subject</option>
<option value="Maths">Maths</option>
<option value="History">History</option>
<option value="Computer Science">Computer Science</option>
</select>
<div id="secondSelectDiv">
</div>

如果在任何下拉J查询中选择了下拉值，则不应显示下拉值

1 个答案: