jq+php+mysql 實現二級選單聯動

hlcc發表於2019-02-16
PHPMySql

二級聯動下拉選單選擇應用在在很多地方，比如說省市下拉聯動，商品大小類下拉選擇聯動。

實現的效果就是當選擇大類時，小類下拉框裡的選項內容也隨著改變。實現原理：根據大類的值，通過jQuery把值傳給後臺PHP處理，PHP通過查詢MySQl資料庫，得到相應的小類，並返回JSON資料給前端處理。

html:

<label>大類：</label>
<select name="bigname" id="bigname"> 
<option value="1">前端技術</option> 
<option value="2">程式開發</option> 
<option value="3">資料庫</option> 
</select> 
<label>小類：</label> 
<select name="smallname" id="smallname"> 
</select>

jQuery

<script>
    $(function(){ 
        getSelectVal(); 
        $("#bigname").change(function(){ 
            getSelectVal(); 
        }); 
    })

function getSelectVal(){ 
   $.getJSON("server.php",{bigname:$("#bigname").val()},function(json){                   
   var smallname = $("#smallname"); 
   $("option",smallname).remove();    
   $.each(json,function(index,array){                        
    var option = "<option > > value=`"+array[`id`]+"`>"+array[`title`]+"</option>";    
    smallname.append(option); 
    }); 
    }); 
 } 
</script>

php 獲取資料就是根據大類的id 從資料庫中獲取小的分類，然後以json的格式返回。

相關文章