【发布时间】：2018-03-05 06:02:09
【问题描述】：
我正在尝试使用引导程序、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 & Futana Is">Wallis & 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
【问题讨论】：