0
我想創建一個由列表框，評論框和提交按鈕組成的HTML表單。該表格允許一個人從列表框中選擇最多7個項目，然後留下關於他/她的選擇的評論。列表框中的項目本身來自與html，php，js和css文件位於同一服務器上的XML文件。帶有selectize.js和來自XML文件的數據的列表框
從XML文件填充列表框，其餘表單工作正常。但是，當我嘗試將列表框與selectize.js組合使用時，我遇到了問題。 Selectize.js本身正在工作，我可以改變列表框，定義可以選擇的項目的最大值等等。但是列表框的選項突然缺失。就好像XML文件的項目沒有正確加載一樣。只要我禁用selectize.js，選項就回來了。
如果這是一個非常基本或重複的問題，我很抱歉。我對jQuery不太熟悉，並且通過各種來源將代碼拼湊在一起。我也嘗試通過搜索類似的問題大概一天來尋求幫助，但迄今爲止沒有運氣。所以，任何幫助，不勝感激。
這是我的代碼。
的index.php
<?php
if($_POST['submit'] == "Submit") {
$errorMessage = "";
if(empty($_POST['select-songs'])) {
$errorMessage .= "<li>You forgot to select a song!</li>";
}
$log = "";
foreach ($_POST['select-songs'] as $song) {
$log .= $song . ",";
}
$log .= $_POST['comment'];
// $songs = $_POST['select-songs'];
// $comment = $_POST['comment'];
if(!empty($errorMessage)) {
echo("<p>There was an error with your form:</p>\n");
echo("<ul>" . $errorMessage . "</ul>\n");
} else {
$fs = fopen("mydata.txt","a");
fwrite($fs,$log . "\n");
fclose($fs);
header("Location: thankyou.html");
exit;
}
}
?>
<html>
<head>
<title>Fav5 Song Selector</title>
<meta charset="UTF-8">
<!-- jQuery libraries -->
<script src="libraries/jquery-3.2.0.min.js"></script>
<script src="libraries/selectize.min.js"></script>
<!-- scripts -->
<script language="javascript" type="text/javascript" src="ui.js"></script> <!-- include the reload.js file -->
<!-- stylesheets -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="selectize.css">
</head>
<body>
<h1>Fav5 Demo UI</h1>
<form action="index.php" method="post">
<select id="songLib" name="songLib[]" class="demo-default">
<option value="" disabled selected hidden>Select a maximum of 7 songs from your playlist</option>
</select>
</br>
<textarea name="comment" rows="5 "cols="25"></textarea>
</br>
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>
ui.js
$(document).ready(function(){
$.ajax({
type: 'GET',
url: 'songs.xml',
dataType: 'xml',
success: function(xml){
$(xml).find('song').each(function() {
$('#songLib').append(
'<option>' +
$(this).find('title').text() +
'</option>'
);
});
}
});
$('#songLib').selectize({
delimiter: ',',
persist: false,
maxItems: 7
});
});