layui 表單元素的選中問題

2021-08-01 01:49:20 字數 1258 閱讀 9446

layui對表單元素都作了美化,比如下拉列表,單選框,多選框.對表單美化後相應元素的操作,其實是在layui處理過後的div上操作,不能真的反映在原始我們編寫的表單的元素上.這也會出現乙個問題,如果想用js對表單做些預處理,怎麼做?操作原始的元素並不會展現在layui處理過的表單中的,那我們就對layui處理過的表單動手

這裡要提兩個我用過的,乙個是單選框,乙個是下拉列表

* 單選框,layui美化後,對應的type=radio的input項隱藏,在input之後追加了乙個div,裡面用i標籤美化,所以我們需要做的事找到目標單選框的臨近i標籤,然後觸發它的click事件

* 下拉框,layui把下拉框美化成了乙個dl,每乙個option標籤都變成了乙個dd標籤表示,其中value更改為lay-value屬性,我們要做的就是找到下拉框對應的dl標籤,將符合要求值lay-valueddclick事件觸發

下面是二者的示例**

var update=$("#update-form")

update.find("input[type=radio][value=female]").next().find("i").click();//將value是female的單選框選中

update.find("dd[lay-value=value-i-need]").click();//將下拉列表value為value-i-need的項選中

多選框也是同樣的道理,首先在頁面上找出layui將其美化成了什麼標籤,有什麼特點,然後看如何能選擇出對應的條目

這裡還有兩個小問題

1. 關於layui匯入元件的問題:layui匯入元件使用layui.use()的方式,需要將所有關聯到layui的js,但又包含自己邏輯的**都放到這裡面,我試過把layui的變數匯出成全域性變數,並不能用,所以,按照官方說法,只能選擇將所有js**包含到layui.use()裡,或者在自己的**裡重複書寫layui.use()來臨時使用layui的元件

1. 關於圖示不能正常顯示的問題(多出現在表單),這個問題其實是上乙個問題的延伸,原因就是沒有使用layui.use()來匯入layui的form元件

常見的表單元素選中

一 獲取select賦值ab 賦值方法 xuanzhe option selected text c 二 redio元素的選中 點選漢字即可以選中,但是後邊的一定是label標籤才行 radio name shouji id p1 for p1 style cursor pointer 蘋果 rad...

layui動態新增的表單元素顯示異常

這種問題發生的原因 layui會對表單內的元素進行二次渲染,動態新增的 沒有經過再次渲染,所以顯示異常。官方文件其實也有提及這個問題和解決方法 解決方法 動態新增元素後,使用form.render 手動觸發渲染,如下 所示 layui.use form function 另外附上layui動態新增r...

針對layui部分表單元素載入不出的情況

layui的部分表單是需要進行渲染,頁面中才會顯示的。1.解決html表單元素載入不出的情況 需要在表單的父元素中加入class layui form 如下 是否推薦 是否熱門 是否關注 需要在js中加入以下 來進行渲染 layui.use form function 2.解決動態生成的部分表單元素...