Layui を使用してドロップダウン メニュー選択機能を実装する方法

Layui を使用してドロップダウン メニュー選択機能を実装する方法

Layui は、迅速に構築できるクラシックで使いやすいフロントエンド UI フレームワークです。美しく簡潔な Web インターフェイス。この記事では、Layui を使用してドロップダウン メニュー選択機能を実装する方法を紹介し、理解を深めるのに役立つ具体的なコード例を添付します。

まず、Layui の関連ファイルを導入する必要があります。 Layui の css および js ファイルは、次の CDN リンクを通じて導入できます:

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>

次に、ドロップダウン メニュー選択コンポーネントを作成する必要があります。コードは次のとおりです。

<div class="layui-inline">
  <div class="layui-input-inline">
    <select id="select" lay-filter="selectFilter" lay-search>
      <option value="">请选择</option>
      <option value="1">选项1</option>
      <option value="2">选项2</option>
      <option value="3">选项3</option>
      <!-- 更多选项... -->
    </select>
  </div>
</div>

上記のコードでは、select 要素はドロップダウン メニューの選択ボックスで、lay-filter 属性は名前を表します。フィルタの lay-search 属性は、検索機能を有効にするかどうかを示します。

次に、ドロップダウン メニューの選択機能を実装するために、対応する JavaScript コードを記述する必要があります。コードは次のとおりです。

layui.use(['form'], function(){
  var form = layui.form;

  // 监听下拉菜单选择事件
  form.on('select(selectFilter)', function(data){
    console.log(data.elem); // 获取select原始DOM对象
    console.log(data.value); // 获取选择的值
    console.log(data.othis); // 获取当前对象
    // 根据选择的值做相应的业务处理...
  });
});

上記のコードでは、layui.use メソッドを使用して form モジュールをロードし、## をリッスンしてフィルタリングします。 #selectFilter 選択された値を取得し、対応するビジネス ロジックを処理するためのコンテナー。

最後に、コンポーネントを適切に動作させるために初期化する必要があります。コードは次のとおりです。

layui.use(['form'], function(){
  var form = layui.form;

  // 初始化组件
  form.render('select');
});

上記のコードでは、

form.render('select') メソッドを使用して select コンポーネントをレンダリングし、正常に動作させます。

ここまでで、Layui を使用したドロップダウン メニューの選択機能を実装するためのコードの記述が完了しました。

概要:

この記事では、Layui を使用してドロップダウン メニュー選択機能を実装する方法を紹介し、具体的なコード例を示します。上記の手順により、美しく使いやすいドロップダウン メニュー選択コンポーネントを実装できます。この記事が、皆さんが Layui フレームワークを理解し、使用するのに役立つことを願っています。

以上がLayui を使用してドロップダウン メニュー選択機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。