Layui:ドロップダウンボックスエコーを選択

A.需要のシーン解析

  マーキーエコーの下Thymeleafのテンプレートの下layuiベース。

第二には、ドロップダウンボックスLayuiの標準を取得し、我々は、HTMLコンテンツを記入する必要があり、次の

<DIV CLASS = "layui-フォーム項目"> 
  <ラベルクラス= "layui-フォームラベル"> <スパンクラス= "色レッド"> * </ span>の送信対象:</ label>は
  <divのクラス= "layui-INPUT-インライン"> 
    <SELECT上記のid = "edit_exam_school"以上> 
      <オプション値= ""> </オプションを選択> 
      <オプション値= "1">大学都市、華南理工大学</オプション> 
      <オプション値= 「2」>呉山地区の華南大学</オプション> 
      <オプション値=「3」>中山大学珠海キャンパス</オプション> 
      <オプション値=「4」>中山大学シティキャンパス</オプション> 
    </ SELECT> 
  </ div> 
</ div>

  どのようにlayuiは、上記の結果をHTML描画?

 

ここで別の要素は、jQueryを介してバックグラウンドデータから動的結果を選択するかを決定する必要性を得られる選択。次のようにDOMツリーを得るために、構造のレンダリングの結果を分析します。

 

DIVをlayui-フォーム選択の追加を選択するlayui入力インライン添加下に。DIV要素をdlと、selectイベントのオプションは、特定のクリックがDD要素をdlとすることにより達成することができるlayui-選択タイトルと2人の子供が含まれています。

 

第三には、どのように自動選択を実現するには?

限り、我々は彼らが望むDD要素の内容を取得し、それをクリックしてイベントをトリガーする場所を選択して、あなたが自動的に選択操作の負荷を選択することができ、上記の分析を通じて学習することができます。

1.第一の方法(推奨)

IF( '[[$ {client.constomerStatus}]]]!= ''){ 
  //バックグラウンド選択値を選択し、デジタルデータ型に変換し得る
    VAR constomerStatus =のparseInt(「[[ $ {client.constomerStatus}] ]「); 
  //最初のレイ値の必要性自動的に選択した要素を決定するために設定する
    VAR = SELECT 『DD [レイ値=』 + + constomerStatusを] 『; 
  //クリックイベントがトリガされ、自動的に選択し
    』($を#edit_exam_school).siblings( "SELECT-div.layui型")( 'DL'の検索)(SELECT).click()を探します; .. 
}

 最初の方法は、第2から導出することができる(卵は使用していないようでした)

// 遍历select
$("#edit_exam_school").each(function() {
  //this代表的是<option></option>,对option再进行遍历
  $(this).children("option").each(function() {
    // 判断需要对那个选项进行回显
    if (this.value == parseInt('[[${client.constomerStatus}]]')) {
      console.log($(this).text());
      // layui回显
      var select = 'dd[lay-value=' + this.value + ']';
      $('#edit_exam_school').siblings("div.layui-form-select").find('dl').find(select).click();
    }
  });
})

  

 

参考链接:https://blog.csdn.net/qq_33594380/article/details/79438026

  第二种写法来源:https://blog.csdn.net/zpf_940810653842/article/details/83788782

おすすめ

転載: www.cnblogs.com/wwct/p/12146693.html