Home Web Front-end JS Tutorial How to deal with select option overlay

How to deal with select option overlay

Apr 11, 2018 pm 03:56 PM
option select deal with

This time I will show you how to deal with the option overlay of select. What are the precautions when dealing with the option overlay of select? The following is a practical case, let's take a look.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

<!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>

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to import css library in vue.js

Installation method of vue and element components

The above is the detailed content of How to deal with select option overlay. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

The operation process of WIN10 service host occupying too much CPU The operation process of WIN10 service host occupying too much CPU Mar 27, 2024 pm 02:41 PM

The operation process of WIN10 service host occupying too much CPU

A quick guide to CSV file manipulation A quick guide to CSV file manipulation Dec 26, 2023 pm 02:23 PM

A quick guide to CSV file manipulation

How to handle XML and JSON data formats in C# development How to handle XML and JSON data formats in C# development Oct 09, 2023 pm 06:15 PM

How to handle XML and JSON data formats in C# development

Learn how to handle special characters and convert single quotes in PHP Learn how to handle special characters and convert single quotes in PHP Mar 27, 2024 pm 12:39 PM

Learn how to handle special characters and convert single quotes in PHP

Asynchronous processing method of Select Channels Go concurrent programming using golang Asynchronous processing method of Select Channels Go concurrent programming using golang Sep 28, 2023 pm 05:27 PM

Asynchronous processing method of Select Channels Go concurrent programming using golang

Generators in PHP7: How to handle large-scale data efficiently and save memory? Generators in PHP7: How to handle large-scale data efficiently and save memory? Oct 20, 2023 pm 04:42 PM

Generators in PHP7: How to handle large-scale data efficiently and save memory?

Exception handling and error logging skills in C# Exception handling and error logging skills in C# Oct 08, 2023 am 11:51 AM

Exception handling and error logging skills in C#

How to deal with multi-language and internationalization issues in PHP development How to deal with multi-language and internationalization issues in PHP development Oct 09, 2023 pm 04:24 PM

How to deal with multi-language and internationalization issues in PHP development

See all articles