入力および入力選択を達成Layui

1   < DIV クラス= "layui-COL-MD4" > 
2                  < ラベルクラス= "layui-フォームラベル" >移交单位< スパンのスタイル= "色：赤" > * </ スパン> </ ラベル> 
3                  < div要素クラス= "layui入力ブロック" > 
4                      < 入力タイプ= "テキスト" 名前= "HandoverCompany" ID = "HandoverCompany" クラス= "layui入力" スタイル=」位置：絶対; Zインデックス：2;幅：80％;」 レイベリファイ= "必要" 値= "111" onkeyupの= "検索（）" オートコンプリート= "オフ" > 
5                      < セレクトタイプ= "テキスト" ID = "hc_select" レイフィルタ= "hc_select" オートコンプリート= "オフ" プレースホルダ=」移交单位全称」レイベリファイ= "必要" クラス= "layui選択" レイ検索> 
6                          < オプション値= "111" > 111 </ オプション> 
7                          <オプション値= "222" > 222</ オプション> 
8                          < オプション値= "333" > 333 </ オプション> 
9                          < オプション値= "444" > 444 </ オプション> 
10                          < オプション値= "555" > 555 </ オプション> 
11                      </ 選択> 
12                  </ DIV > 
13              </ DIV >

どこで簡単にスタイルについていくつかのスタイルの入力。

位置：絶対ここには同じ場所で入力を取得し、選択することです。
Zインデックス：2以上の選択入力を可能にするためです。
幅：クリックして選択し、選択の背後にある小さな三角形をカバーしないために80％。
オートコンプリート入力ボックスを自動入力させないためには腺[オプション]を選択しLEST、=「オフ」

そして、JSコード。

  layui.use（[ '形態'、 'layedit'、 'アップロード']、関数（）{
             VARの形式= layui.form
   form.on（ 'SELECT（hc_select）'、関数（データ）{    // 入力フレームに割り当てられた選択された転送ユニット 
                $（ "＃1 HandoverCompany" ）.val（data.value）。
                $（ "#hc_select"）次の（）（ "DL"）、CSS（{ "表示"： "なし"を見つけます。。。}）。
                form.render（）;
            }）;

            window.search = 関数（）{
                 VARの値= $（ "＃1 HandoverCompany" ）.val（）;
                $（ "#hc_select" ）.val（値）;
                form.render（）;
                $（ "#hc_select"）次の（）（ "DL"）、CSS（{ "表示"： "ブロック"を見つけます。。。}）。
                VaRの DL = $（ "＃のhc_select"）次の（）（ "DL"を見つける。。）.children（）;
                VaRの J = -1 ;
                ため（VAR i = 0; iはdl.lengthを<; iは++ ）{
                     場合（DL [I] .innerHTML.indexOf（値）<= -1 ）{
                        DL [I] .style.display = "なし" 、
                        J ++ ;
                    }
                    もし（J == dl.length-1 ）{
                        $（ "#hc_select"）次の（）（ "DL"）、CSS（{ "表示"： "なし"を見つけます。。。}）。
                    }
                }
                
            }
        }）;

私は簡単にアイデアについては、すべての最初の入力ボックスに割り当てられた選択された値を選択することができるようにするには、必要があるかもしれないform.on('select(hc_select)'選択値の変化を監視し、その後、隠さ作るためにドロップダウンリストを選択します。同時に、電流だけが可能また、選択再レンダリングするために、このフォームを再レンダリングします。
そして、検索を行く方法を選択するためのテキスト入力ボックスに入力されます。示すように、まず、我々はDOM構造を選択しチェックすることで見つけることができ、彼のオプションは、DLの下DDタブにあります。

その後、我々は、DLタブを取得した後、DDオプションでテキストと一致するかどうかを一つ一つ、私たちは、円形のファッションを通じて入力する関係にあります。 indexOf ライン。あなたが好きではない場合は、直接隠す、なぜ定義する必要がありますただし、j、それ？それが一致しない場合は、次のはまだ空のDLタグと出てきますので、ページの表示には、空の小さなリスト、少し美的インパクトあるので、オプションは、テキストとドロップダウンの間には関係がない場合、DLに直接、その後、あなたの入力を示しています非表示にします。私は似たとdl.length同等の数が、それは、あなたが隠されたDLを置くことができ、あなたがテキストを入力し、同様の誰にオプションを選択することを示しているかどうかを判断するためにここにいないです。

入力および入力選択を達成Layui

おすすめ