Jquery 動態增加option及獲取值 遍歷option相關方法

①條鹹魚發表於2018-11-26

HTML:

<select id="types" name="types" lay-verify="required" placeholder="所有檢查類別">
    <option value="">所有檢查類別</option>
</select>

JS呼叫Ajax獲取json資料並渲染:

window.onload = function() {
    //宣告form
    var form;
    layui.use('laydate', function(){
         form = layui.form;
    });

    //獲取json資料,在select中顯示
    $.ajax({
        url: 'url', //表示傳送請求的路徑
        type: 'get', //http請求方式
        async: false, //同步請求,將鎖住瀏覽器,使用者其他操作必須等待請求完成才可以執行
        dataType: 'json', //伺服器返回json資料
        error: function(){
            alert("系統忙,請稍後再試!");
            return false;
        },

        //請求成功後的回撥函式,由伺服器返回,並根據dataType引數進行處理後的資料;描述狀態的字串
        success:function(data){
            var result = data.data;
            if (result.length > 0) {
                for(var i = 0; i < result.length; i++){
                    $("#types").append("<option value='"+i+"'>"+result[i].types+"</option>");//新增
                }
                form.render('select'); //重新整理select選擇框渲染
            }
       }
   });
}

JSON資料:

{
	"code": 0
	,"msg": ""
	,"count": 12
	,"data": [
		{
			,"types": "CT"
		}
}

 

相關文章