オプションのオーバーレイの問題を選択してください
今回はselectのオプションオーバーレイ問題をお届けします。selectのオプションオーバーレイ問題を解くための注意点は何ですか？以下は実際的なケースです、一緒に見てみましょう。 エディター、layuiを使用していますが、選択領域の値をクリアできず、この問題を解決して機能を実現するには、選択内のオプションに重ね合わせの問題が発生しました。 , 同じニーズを持つ友人が罠に足を踏み入れないように、いくつかの調査を行いました。ソース コードを投稿しました:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layui-下拉框联动测试</title>
<link rel="stylesheet" href="layui/css/layui.css" rel="external nofollow" >
</head>
<body>
<p id="wrap">
<p class="layui-form" lay-filter="merchantForm">
<p class="layui-form-item">
<label class="layui-form-label">选择框</label>
<p class="layui-input-block">
<select name="city" lay-verify="required" id="test1" lay-filter="test1">
<option value="0">时间</option>
<option value="1">金额</option>
</select>
</p>
</p>
<p class="layui-form-item">
<label class="layui-form-label">选择框</label>
<p class="layui-input-block">
<select name="city" lay-verify="required" id="test2" lay-filter="test2">
<option value="">请选择规则名称</option>
</select>
</p>
</p>
</p>
<button id="btn">确定</button>
</body>
<script src="layui/layui.all.js"></script>
<script src="layui/jquery-1.8.3.min.js"></script>
<script>
//后台传过来的数据
var data=[
{unitType:0,ruleName:'时间规则11',amount:1100,money:1100},
{unitType:0,ruleName:'时间规则12',amount:1200,money:1200},
{unitType:0,ruleName:'时间规则13',amount:1300,money:1300},
{unitType:1,ruleName:'金额规则21',amount:2100,money:2100},
{unitType:1,ruleName:'金额规则22',amount:2200,money:2200},
{unitType:1,ruleName:'金额规则23',amount:2300,money:2300},
];
//初始化默认为时间类型以及对应的时间规则
layui.use('form', function(){
var form = layui.form;
$('#test2').html('');
var html='';
$.each(data,function(i,e){
if(e.unitType==0)
html+=`<option data-type="${e.unitType}">${e.ruleName}</option>`;
})
$('#test2').append(html);
form.render('select');
})
//动态二级联动
layui.use('form', function(){
var form = layui.form;
form.on('select(test1)', function(obj){
$('#test2').html('');
var html='';
if(obj.value==0){
$.each(data,function(i,e){
if(e.unitType==obj.value)
html+=`<option data-type="${e.unitType}">${e.ruleName}</option>`;
})
$('#test2').append(html);
}else if(obj.value==1){
$.each(data,function(i,e){
if(e.unitType==obj.value)
html+=`<option data-type="${e.unitType}">${e.ruleName}</option>`;
})
$('#test2').append(html);
}
form.render('select');
});
})
//二级联动完毕后获取对应的规则数据
$('#btn').click(function(){
var thisValue=data.find((v)=>v.ruleName==$('#test2').val());
console.log(thisValue);
})
</script>
</html>この記事の事例を読んだ後は、この方法を習得したと思います。 PHP 中国語 Web サイトの他の関連記事にも注目してください。
推奨書籍:
vue で xe-utils を使用する方法 vue-router のビルド時にルーティング ページが表示されない場合の対処方法以上がオプションのオーバーレイの問題を選択してくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7716
15
1641
14
1396
52
1289
25
1232
29
クラスタリングアルゴリズムにおけるクラスタリング効果評価問題
Oct 10, 2023 pm 01:12 PM
クラスタリング アルゴリズムのクラスタリング効果評価問題には、特定のコード例が必要です クラスタリングは、データをクラスタリングすることによって、類似したサンプルを 1 つのカテゴリにグループ化する教師なし学習手法です。クラスタリングアルゴリズムでは、クラスタリングの効果をどのように評価するかが重要な問題となります。この記事では、一般的に使用されるいくつかのクラスタリング効果評価指標を紹介し、対応するコード例を示します。 1. クラスタリング効果評価指標 シルエット係数 シルエット係数は、サンプルの近さや他のクラスタとの分離度を計算することでクラスタリング効果を評価します。
iPhone の一般的な問題を診断する方法を教えます
Dec 03, 2023 am 08:15 AM
強力なパフォーマンスと多彩な機能で知られる iPhone は、複雑な電子機器によく見られる、時折起こる問題や技術的な困難を免れません。 iPhone の問題が発生するとイライラすることもありますが、通常は警報を発する必要はありません。この包括的なガイドでは、iPhone の使用に関連して最も一般的に遭遇する課題のいくつかをわかりやすく説明することを目的としています。当社の段階的なアプローチは、これらの一般的な問題の解決に役立つように設計されており、機器を最高の動作状態に戻すための実用的な解決策とトラブルシューティングのヒントを提供します。不具合やより複雑な問題に直面している場合でも、この記事はそれらを効果的に解決するのに役立ちます。一般的なトラブルシューティングのヒント 具体的なトラブルシューティング手順を詳しく説明する前に、役立つ情報をいくつか紹介します。
jQueryがform要素の値を取得できない問題の解決方法
Feb 19, 2024 pm 02:01 PM
jQuery.val() が使用できない問題を解決するには、具体的なコード例が必要です フロントエンド開発者にとって、jQuery の使用は一般的な操作の 1 つです。その中でも、.val() メソッドを使用してフォーム要素の値を取得または設定する操作は、非常に一般的な操作です。ただし、特定のケースでは、.val() メソッドを使用できないという問題が発生する可能性があります。この記事では、いくつかの一般的な状況と解決策を紹介し、具体的なコード例を示します。問題の説明 jQuery を使用してフロントエンド ページを開発する場合、時々次のような問題が発生します。
Select Channels Goの非同期処理方法 golangを使った並行プログラミング
Sep 28, 2023 pm 05:27 PM
golang を使用した SelectChannelsGo 同時プログラミングの非同期処理方法 はじめに: 同時プログラミングは、アプリケーションのパフォーマンスと応答性を効果的に向上させることができる、現代のソフトウェア開発における重要な領域です。 Go 言語では、Channel と Select ステートメントを使用して同時プログラミングを簡単かつ効率的に実装できます。この記事では、SelectChannelsGo 同時プログラミングの非同期処理メソッドに golang を使用する方法を紹介し、具体的な方法を提供します。
弱教師学習におけるラベル取得問題
Oct 08, 2023 am 09:18 AM
弱教師あり学習におけるラベル取得問題には、特定のコード例が必要です はじめに: 弱教師あり学習は、トレーニングに弱いラベルを使用する機械学習手法です。従来の教師あり学習とは異なり、弱教師あり学習では、各サンプルに正確なラベルが必要ではなく、より少ないラベルを使用してモデルをトレーニングするだけで済みます。しかし、弱教師あり学習では、弱いラベルから有用な情報をいかに正確に取得するかが重要な問題となります。この記事では、弱教師あり学習におけるラベル取得問題を紹介し、具体的なコード例を示します。弱教師学習におけるラベル獲得問題の紹介:
機械学習モデルの汎化能力の問題
Oct 08, 2023 am 10:46 AM
機械学習モデルの汎化能力には特定のコード例が必要ですが、機械学習の開発と応用がますます普及するにつれて、機械学習モデルの汎化能力に対する注目が高まっています。一般化能力とは、ラベルなしデータに対する機械学習モデルの予測能力を指し、現実世界におけるモデルの適応性としても理解できます。優れた機械学習モデルは、高い汎化能力を備え、新しいデータに対して正確な予測を行うことができる必要があります。ただし、実際のアプリケーションでは、トレーニング セットでは良好なパフォーマンスを示しても、テスト セットや実際のテストでは失敗するモデルに遭遇することがよくあります。
jQueryで選択要素の変更イベントバインディングを実装する方法
Feb 23, 2024 pm 01:12 PM
jQuery は、DOM 操作、イベント処理、アニメーション効果などを簡素化するために使用できる人気のある JavaScript ライブラリです。 Web 開発では、選択した要素のイベント バインディングを変更する必要がある状況によく遭遇します。この記事では、jQuery を使用して選択要素変更イベントをバインドする方法を紹介し、具体的なコード例を示します。まず、ラベルを使用してオプションを含むドロップダウン メニューを作成する必要があります。
Rulong 8 ワインマスター試験の問題は何ですか?
Feb 02, 2024 am 10:18 AM
Yulong 8 ワインマスター試験にはどのような問題がありますか?対応する答えは何でしょうか?試験に早く合格するにはどうすればよいですか?マスター オブ ワイン試験の活動では、回答しなければならない質問がたくさんあり、その回答を参照して解決することができます。これらの質問にはすべてワインの知識が含まれます。参考が必要な場合は、龍が如く 8 ワインマスター試験問題の解答の詳細な分析を見てみましょう。 Rulong 8 ワインマスター試験の問題の答えを詳しく解説 1.「ワイン」に関する質問。ハワイで大量に栽培されているサトウキビの糖分を原料に醸造され、王室御用達の蒸留所で造られる蒸留酒です。このワインの名前は何ですか? 答え: ラム酒 2.「ワイン」についての質問です。写真は乾燥高麗人参と乾燥ベルモットをブレンドしたドリンクです。オリーブが入っているのが特徴で「コックニー」と呼ばれています。
