[英]PHP Javascript dynamic select box
我正在嘗試根據第一個下拉列表中的選擇動態加載第二個select下拉列表。 我從此處給出的示例進行了嘗試,但似乎無法自己運行。 警報輸入值已更改顯示,但輸入值已更改2消息未出現。 原始示例如下: PHP MYSQL動態選擇框
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<select id="select1" onchange="createSelect2()">
<option value="">Select sth</option>
<option value="1">1st option</option>
<option value="2">2nd option</option>
<option value="3">3rd option</option>
</select>
<select id="select2" onchange="selectSelect2">
<option value="">Select from select1 first</option>
</select>
<script>
$('#select1').change(createSelect2);
$('#select2').change(selectSelect2);
function createSelect2(){
alert("The input value has changed.") ;
var option = $(this).find(':selected').val(),
dataString = "option="+option;
if(option != '')
{
alert("The input value has changed 2. The new value is: " + option);
$.ajax({
type : 'GET',
url : 'http://www.mitilini-trans.gr/demo/test.php',
data : dataString,
dataType : 'JSON',
cache: false,
success : function(data) {
var output = '<option value="">Select Sth</option>';
$.each(data.data, function(i,s){
var newOption = s;
output += '<option value="' + newOption + '">' + newOption + '</option>';
});
$('#select2').empty().append(output);
},
error: function(){
console.log("Ajax failed");
}
});
}
else
{
console.log("You have to select at least sth");
}
}
function selectSelect2(){
var option = $(this).find(':selected').val();
if(option != '')
{
alert("You selected: "+option);
}
else
{
alert("You have to select at least sth");
}
}
</script>
</body>
</html>
該腳本似乎正確。 您只是忘了添加jQuery庫。
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<head>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.