Jquery 動態增加option及獲取值 遍歷option相關方法
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"
}
}
相關文章
- jquery獲得option的值和對option進行操作jQuery
- MTK Camera相關的Makefile Option詳解
- jQuery 遍歷方法jQuery
- JS/JQ動態建立(新增)optgroup和option屬性JS
- 遍歷方法 js jquery 我 常用JSjQuery
- jQuery 遍歷jQuery
- 如何在下拉框Select中動態新增option?
- option新增空白
- jQuery 遍歷 – 祖先jQuery
- The option-critic architecture
- 蘋果電腦上神奇的Option鍵,巧用option鍵提升效率蘋果
- Jquery之遍歷元素jQuery
- jQuery 遍歷 – 後代jQuery
- jQuery 遍歷 – 同胞(siblings)jQuery
- jQuery 遍歷 – 過濾jQuery
- jquery遍歷節點jQuery
- Kotlin Type? vs Scala OptionKotlin
- jQuery列表動態增加和刪除jQuery
- jQuery 元素操作——遍歷元素jQuery
- jQuery的遍歷結構設計之遍歷同胞jQuery
- jQuery的遍歷結構設計之遍歷祖先jQuery
- jquery裡遍歷普通陣列和多維陣列的方法及例項jQuery陣列
- post請求帶來的option
- Rust 程式設計,Option 學習Rust程式設計
- 期權——put-call option parity
- YUI Datatable dropdown option value text definationUI
- Dynamic Web Project option missing in Eclipse KeplerWebProjectEclipse
- [Typescript] The module & moduleResolution Option in tsconfig.jsonTypeScriptJSON
- Echarts中Option屬性設定Echarts
- The hidden power of option-click in vscode explorerVSCode
- the --skip-grant-tables option so it cannot
- JQuery實現下拉框Select的獲取值與文字、動態繫結資料、事件等操作jQuery事件
- jquery遍歷得到的 Map 資料,jQuery
- vue3 動態編譯元件失敗:Component provided template option but runtime compilation is not supported in this build of VueVue編譯元件IDEUI
- 跨域之OPTION請求【轉載】跨域
- 【筆記】jQuery原始碼(節點遍歷)筆記jQuery原始碼
- PostgreSQL DBA(70) - PG 12 Add SETTINGS option to EXPLAINSQLAI
- PostgreSQL DBA(149) - PG 12(Add SETTINGS option to EXPLAIN)SQLAI