頁面加載後下拉列表顯示數據
1 . 單個下拉列表顯示數據
1 系統類型 :<select name="systemtype" id="systemtype" class="xla_sheng"> 2 <option value="" selected style="width:260px;height:30px;">請選擇</option> 3 </select>
1 $(function () { 2 //getjson(url,data,callback) 其中data能夠沒有值 3 $.getJSON('/admin/sysType/',function (regions) { 4 $.each(regions,function (key,values) { 5 //console.log(key,values) 6 $('#systemtype').append($('<option value=""></option>').attr('value',key).text(values))---> 給 7 }) 8 }) 9 });
---- >getJSON 中(url,data(字典),callback)
2. 二級聯動效果,在頁面上繼續添加以下信息,三級聯動和二級聯動方法同樣
數據類型 :<select name="datatype" id="datatype" class="xla_sheng"> <option value="" selected style="width:260px;height:30px;">請選擇</option> </select>
$('#systemtype').change(function () { $('#datatype').empty() // 異步刷新時 若是不清空上一條記錄留下的內容,會重複疊加 $('#datatype').append($('<option value="">請選擇</option>')) $.getJSON('/admin/typeData/',{val:$('#systemtype').val()},function (regions) { $.each(regions,function (key,values) {//回調函數以鍵值對形式存在 $('#datatype').append($('<option value=""></option>').attr('value',key).text(values)) }) });
回調函數是由後臺返回的, 類型是json.dumps()json