Question

我正在尝试使用bootstrap，JQuery和AJAX创建多个下拉菜单。我想从下拉菜单中选择多个国家/地区，然后以CSV格式将所选值输入我的数据库。下面的代码适用于1个下拉菜单。但我想复制它，并希望共有3个下拉菜单。它适用于2个菜单，但它不适用于3个菜单。单击“提交按钮”不执行任何操作，这意味着表单未提交，因此我的数据库中未插入任何内容。 [更新：上述问题的解决方式是插入第三个下拉列表的选定值。但不是我想要的方式。] 下面是我的index.php：

<!DOCTYPE html>
<html>
 <head>
  <title> Tutorial</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.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.5/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" />
 </head>
 <body>
  <br /><br />
  <div class="container" style="width:600px;">
   <h2 align="center">Bootstrap Multi Select Dropdown with Checkboxes using Jquery in PHP</h2>
   <br /><br />
   <form method="post" id="framework_form">
    <div class="form-group">
     <label>Select country</label><br>
     <select id="markappcountry" name="markappcountry[]" multiple class="form-control" >
      <option value="Afghanistan">Afghanistan</option>
        <option value="Albania">Albania</option>
        <option value="Yemen">Yemen</option>
        <option value="Zaire">Zaire</option>
        <option value="Zambia">Zambia</option>
        <option value="Zimbabwe">Zimbabwe</option>
     </select>
    </div>

   <div class="form-group">
     <label>Select second country</label><br/>
     <select id="country" name="markcountry[]" multiple class="form-control" >
      <option value="Afghanistan">Afghanistan</option>
        <option value="Albania">Albania</option>
        <option value="Algeria">Algeria</option>
        <option value="Yemen">Yemen</option>
        <option value="Zaire">Zaire</option>
        <option value="Zambia">Zambia</option>
        <option value="Zimbabwe">Zimbabwe</option>
     </select>
    </div>

    <div class="form-group">
     <label>Select third country</label><br/>
     <select id="thirdcountry" name="thirdcountry[]" multiple class="form-control" >
      <option value="Afghanistan">Afghanistan</option>
        <option value="Albania">Albania</option>
        <option value="Algeria">Algeria</option>
        <option value="American">American Samoa</option>
        <option value="Andorra">Andorra</option>
        <option value="Wake Island">Wake Island</option>
        <option value="Wallis &amp; Futana Is">Wallis &amp; Futana Is</option>
        <option value="Yemen">Yemen</option>
        <option value="Zaire">Zaire</option>
        <option value="Zambia">Zambia</option>
        <option value="Zimbabwe">Zimbabwe</option>
     </select>
    </div>


   <div class="form-group">
     <input type="submit" class="btn btn-info" name="submit" value="Submit" />
    </div>
   </form>
   <br />
  </div>
 </body>
</html>

<script>

$(document).ready(function(){

 $('#markappcountry').multiselect({
  nonSelectedText: 'Select Country',
  enableFiltering: true,
  enableCaseInsensitiveFiltering: true,
  buttonWidth:'400px'
 });

 $('#country').multiselect({
  nonSelectedText: 'Select another Country',
  enableFiltering: true,
  enableCaseInsensitiveFiltering: true,
  buttonWidth:'400px'
 });    

 $('#thirdcountry').multiselect({
  nonSelectedText: 'Select third Country',
  enableFiltering: true,
  enableCaseInsensitiveFiltering: true,
  buttonWidth:'400px'
 });

 $('#framework_form').on('submit', function(event){
  event.preventDefault();
  var form_data = $(this).serialize();
  $.ajax({
   url:"insert.php",
   method:"POST",
   data:form_data,
   success:function(data)
   {
    $('#markappcountry option:selected').each(function(){
     $(this).prop('selected', false);
    });
    $('#markappcountry').multiselect('refresh');
    alert(data);
   }
  });
 });


});

</script>

以下是我的Insert.php。通过这个，我试图首先建立连接，然后将选定的值从下拉菜单插入我的数据库。

   <?php 
//insert.php
$connect = mysqli_connect("localhost", "root", "abcdef", "testing");

if (isset($_POST)) {
    $markappcountry =   !empty($_POST['markappcountry']) ? $_POST['markappcountry'] : "";

    if(isset($_POST["markappcountry"])){
        $framework = '';
        foreach($_POST["markappcountry"] as $row){
            $framework .= $row . ', ';
        }
        $framework = substr($framework, 0, -2);
        $query = "INSERT INTO like_table(framework) VALUES('".$framework."')";
        mysqli_query($connect, $query);
     }

    $countryy = !empty($_POST['markcountry']) ? $_POST['markcountry'] : "";

    if(isset($_POST["markcountry"])){
        $countryy = '';
        foreach($_POST["markcountry"] as $row) {
            $countryy .= $row . ', ';
        }
        $countryy = substr($countryy, 0, -2);
        $query = "INSERT INTO like_table(country) VALUES('".$countryy."')";
        mysqli_query($connect, $query);
    }

    $thirdcountryy =     !empty($_POST['thirdcountry']) ? $_POST['thirdcountry'] : "";

    if(isset($_POST["thirdcountry"])){
        $thirdcountryy = '';
        foreach($_POST["thirdcountry"] as $row){
            $thirdcountryy .= $row . ', ';
        }
        $thirdcountryy = substr($thirdcountryy, 0, -2);
        $query = "INSERT INTO like_table(third) VALUES('".$thirdcountryy."')";
        if(mysqli_query($connect, $query)) {
            header("refresh:1 ; url=index.html");
        }
    } 
}
?>

更新Insert.php代码后。正在插入数据，如快照中所示：Data is being inserted like a 3x3 matrix. I want them to be inserted in a single row

Answer 1

你的insert.php有一些错误。请使用以下代码...

<?php 
//insert.php
$connect = mysqli_connect("localhost", "root", "abcdef", "testing");

if (isset($_POST)) {
    $_POST = array_map(function($value) {
        return empty($value) ? "NULL" : $value;
    }, $_POST);
}
// var_dump($_POST);

if (isset($_POST)) {

    $markappcountry = !empty($_POST['markappcountry']) ? $_POST['markappcountry'] : "";
    $countryy = !empty($_POST['markcountry']) ? $_POST['markcountry'] : "";
    $thirdcountryy =     !empty($_POST['thirdcountry']) ? $_POST['thirdcountry'] : "";

    $framework = '';
    foreach($_POST["markappcountry"] as $row){
        $framework .= $row . ', ';
    }
    $framework = substr($framework, 0, -2);
    $countryy = '';
    foreach($_POST["markcountry"] as $row) {
        $countryy .= $row . ', ';
    }
    $countryy = substr($countryy, 0, -2);
    $thirdcountryy = '';
    foreach($_POST["thirdcountry"] as $row){
        $thirdcountryy .= $row . ', ';
    }
    $thirdcountryy = substr($thirdcountryy, 0, -2);
    $query = "INSERT INTO like_table(framework), like_table(country), like_table(third) VALUES('".$framework."','".$countryy."','".$thirdcountryy."')";
    if(mysqli_query($connect, $query)) {
        header("refresh:1 ; url=index.html");
    }
}
?>

多个下拉列表无法使用Jquery和Ajax

1 个答案: