-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSelecttest.php
149 lines (122 loc) · 3.76 KB
/
Selecttest.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<?php
ini_set('display_errors','1');
error_reporting(E_ALL);
?>
<!doctype html>
<html lang="en">
<?php include("header.php"); ?>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<br>
第一層
<select id="myParentSelect">
<option value="">請選擇</option>
<?php
// 取得第一層option資料
require_once('conn/conn1.php');
?>
<?php
$sqls = "SELECT productid, titlename FROM chiweiproduct where parentid = 0"; //在test資料表中選擇所有欄位
$resultrt = mysqli_query($link,$sqls); // 執行SQL查詢
while ($row = mysqli_fetch_array ($resultrt)){
echo '<option value="' . $row['productid'] . '">' . $row["titlename"]. '</option>' . "\n";
} ?>
</select>
第二層
<select id="myFirstChildSelect">
<option value="">請選擇</option>
<option value="">我非動態</option>
</select>
<script>
$(function() {
$('#myParentSelect').change(function() {
//更動第一層時第二層清空
$('#myFirstChildSelect').empty().append("<option value=''>請選擇y</option>");
var i = 0;
var conceptName = $('#myParentSelect').find(":selected").text();
alert(conceptName);
$.ajax({
type: "GET",
url: "action.php",
data: {
lv: $('#myParentSelect option:selected').val()
},
datatype: "json",
success: function(result) {
//當第一層回到預設值時，第二層回到預設位置
if (result == "") {
$('#myFirstChildSelect').val($('option:first').val());
}
//依據第一層回傳的值去改變第二層的內容
while (i < result.length) {
$("#myFirstChildSelect").append("<option value='" + i + "'>" + results[i]['titlename'] + "</option>");
i++;
$NewArray=array('A','B','C');
}
},
error: function(xhr, status, msg) {
console.error(xhr);
console.error(msg);
}
});
});
});
</script>
<script type="text/javascript">
$(function () {
setFirstSelect();
setEvent();
});
function setFirstSelect() {
$.ajax({
'url' : 'testsele.php',
'type' : 'GET',
'data' : {
'action' : 'getFirst'
},
'dataType' : 'json',
'success' : function(oJson) {
for (var key in oJson) {
$("#first").append($("<option></option>").attr("value", oJson[key]).text(oJson[key]));
}
},
'error' : function(e, settings, techNote, message) {
console.log(e);
}
});
}
function setEvent() {
$('#first').change(function() {
var firstValue = $("#first").find(":selected").val();
$("#second option").remove();
if (firstValue == "select") {
$("#second").append($("<option></option>").text("select"));
} else {
$.ajax({
'url' : 'testsele.php',
'type' : 'GET',
'data' : {
'action' : 'getSecond',
'firstValue' : firstValue
},
'dataType' : 'json',
'success' : function(oJson) {
for (var key in oJson) {
$("#second").append($("<option></option>").attr("value", oJson[key]).text(oJson[key]));
}
},
'error' : function(e, settings, techNote, message) {
console.log(e);
}
});
}
});
}
</script>
<select id="first">
<option>select</option>
</select>
<select id="second">
<option>select</option>
</select>
</body>
</html>