之前受老鷹大(chingfeng)的幫忙
幫我寫出 jquery 語法的三層下拉
不過該下拉有一個小小問題
就是初始的時候
當
【第一層】變動後
此時的【第二層】當然跟著變了(算是依據【第一層】變動跟著自動改變的)
但是【第三層】並沒有根據【第二層】而改變
必須要手動去讓【第二層】改變
【第三層】才會變
程式碼如下(由於字數長度限制，就只貼出有關的 html)
<script src="jquery-1.11.3.min.js"></script>
<script>
$(function(){
//三層下拉
$('#center').change(function(){
$.post('unit.php',{center:$('#center').val()},function(data){
var loan = data.length;
var center_html = '';
for(var i = 0;i<loan;i++){
center_html += '<option value="'+data[i]+'">'+data[i]+'</option>';
}
$('#unit').html(center_html);
$('#unit').change(function(){
$.post('name.php',{unit:$('#unit').val(),center:$('#center').val()},function(data){
var loan = data.length;
var name_html = '';
for(var i = 0;i<loan;i++){
name_html += '<option value="'+data[i].id+'">'+data[i].name+'</option>';
}
$('#name').attr("size",loan);
$('#name').attr("multiple","multiple");
$('#name').html(name_html);
},'json');
});
},'json');
});
//兩層下拉
$('#district').change(function(){
$.post('machine.php',{district:$('#district').val()},function(data){
var loan = data.length;
var district_html = '';
for(var i = 0;i<loan;i++){
district_html += '<option value="'+data[i].id+'">'+data[i].machine+'</option>';
}
$('#machine').attr("size",loan);
$('#machine').attr("multiple","multiple");
$('#machine').html(district_html);
},'json');
});
});
</script>
謝謝大家的幫忙
^_^
已邀請的邦友 {{ invite_list.length }}/5
$('#unit').change(function()
這個事件，為什麼是包含在$('#center').change事件中？
你把它拉出來，放到$(function(){});區塊裡頭，問題應該就解了
我用舊的範例給你看,你在自己摸索研究一下
a.php
<pre class="c" name="code">
<?php
if($_POST['type'] == 'A'){
$a = [1,2,3,4,5,9,7];
}else{
$a = [8,9,10,11,12,13,14];
}
echo json_encode($a);
b.php
<pre class="c" name="code">
<?php
if($_POST['num'] == 1){
echo json_encode(['ken']);
}elseif($_POST['num'] == 2){
echo json_encode(['joe','ted']);
}else{
echo json_encode(['sam']);
}
c.php
<pre class="c" name="code">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<select name="type" id="type">
<option value="A">A</option>
<option value="B">B</option>
</select>
<select name="num" id="num">
</select>
<select name="name" id="name">
</select>
<script>
$(function(){
$('#type').change(function(){
$.post('a.php',{type:$('#type').val()},function(data){
var loan = data.length;
var type_html = '';
for(var i = 0;i<loan;i++){
type_html += '<option value="'+data[i]+'">'+data[i]+'</option>';
}
$('#num').html(type_html);
$.post('b.php',{num:$('#num').val()},function(data){
var loan = data.length;
var name_html = '';
for(var i = 0;i<loan;i++){
name_html += '<option value="'+data[i]+'">'+data[i]+'</option>';
}
$('#name').html(name_html);
},'json');
$('#num').change(function(){
$.post('b.php',{num:$('#num').val()},function(data){
var loan = data.length;
var name_html = '';
for(var i = 0;i<loan;i++){
name_html += '<option value="'+data[i]+'">'+data[i]+'</option>';
}
$('#name').html(name_html);
},'json');
});
},'json');
});
});
</script>
iThome鐵人賽
看影片追技術