64 lines
20 KiB
HTML
64 lines
20 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en-US">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|||
|
|
<title>下拉选择 | WGINK</title>
|
|||
|
|
<meta name="generator" content="VuePress 1.9.7">
|
|||
|
|
|
|||
|
|
<meta name="description" content="">
|
|||
|
|
|
|||
|
|
<link rel="preload" href="/assets/css/0.styles.098b46e5.css" as="style"><link rel="preload" href="/assets/js/app.8419454b.js" as="script"><link rel="preload" href="/assets/js/2.3324ea8d.js" as="script"><link rel="preload" href="/assets/js/13.128ee0cc.js" as="script"><link rel="prefetch" href="/assets/js/10.1698a97b.js"><link rel="prefetch" href="/assets/js/11.24b85a91.js"><link rel="prefetch" href="/assets/js/12.194e06f2.js"><link rel="prefetch" href="/assets/js/14.931aed60.js"><link rel="prefetch" href="/assets/js/15.be64026d.js"><link rel="prefetch" href="/assets/js/16.8675e2d6.js"><link rel="prefetch" href="/assets/js/17.1ade9db3.js"><link rel="prefetch" href="/assets/js/3.332e57f2.js"><link rel="prefetch" href="/assets/js/4.a3c79904.js"><link rel="prefetch" href="/assets/js/5.f16cfca9.js"><link rel="prefetch" href="/assets/js/6.19a486e1.js"><link rel="prefetch" href="/assets/js/7.9efeaebf.js"><link rel="prefetch" href="/assets/js/8.7dc718e0.js"><link rel="prefetch" href="/assets/js/9.07f1828d.js">
|
|||
|
|
<link rel="stylesheet" href="/assets/css/0.styles.098b46e5.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">WGINK</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/" aria-current="page" class="sidebar-link">首页</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>业务</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>代码模板</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/code-template/area-select.html" class="sidebar-link">地区选择</a></li><li><a href="/code-template/excel-upload.html" class="sidebar-link">EasyExcel 上传（导入）</a></li><li><a href="/code-template/select.html" aria-current="page" class="active sidebar-link">下拉选择</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/code-template/select.html#静态选择" class="sidebar-link">静态选择</a></li><li class="sidebar-sub-header"><a href="/code-template/select.html#基于jquery的动态选择" class="sidebar-link">基于JQuery的动态选择</a></li></ul></li><li><a href="/code-template/list-select.html" class="sidebar-link">列表选择</a></li><li><a href="/code-template/layui-util.html" class="sidebar-link">layui工具</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="下拉选择"><a href="#下拉选择" class="header-anchor">#</a> 下拉选择</h1> <h2 id="静态选择"><a href="#静态选择" class="header-anchor">#</a> 静态选择</h2> <p>表单</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-form-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-input-block<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selector<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selector<span class="token punctuation">"</span></span> <span class="token attr-name">lay-filter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selectorSelect<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选择类型<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>type1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>类型1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>type2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>类型2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|||
|
|
</code></pre></div><p>列表</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-inline layui-form search-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>type<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>type<span class="token punctuation">"</span></span> <span class="token attr-name">lay-filter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>typeFilter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>选择类型<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>type1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>类型1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>type2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>类型2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|||
|
|
</code></pre></div><h2 id="基于jquery的动态选择"><a href="#基于jquery的动态选择" class="header-anchor">#</a> 基于JQuery的动态选择</h2> <p>html</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-form-item<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-form-label<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>layui-input-block<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selector<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selector<span class="token punctuation">"</span></span> <span class="token attr-name">lay-filter</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selectorSelect<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|||
|
|
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
|||
|
|
</code></pre></div><p>js</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 初始化</span>
|
|||
|
|
<span class="token keyword">function</span> <span class="token function">initSelect</span><span class="token punctuation">(</span><span class="token parameter">callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|||
|
|
top<span class="token punctuation">.</span>restAjax<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>top<span class="token punctuation">.</span>restAjax<span class="token punctuation">.</span><span class="token function">path</span><span class="token punctuation">(</span><span class="token string">'url'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">''</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">code<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|||
|
|
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#selector'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'<option value="">请选择</option>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|||
|
|
$<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">index<span class="token punctuation">,</span> item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|||
|
|
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#selector'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'<option value="’+ item.dataName +‘" '</span><span class="token operator">+</span> <span class="token punctuation">(</span>index <span class="token operator">===</span> <span class="token number">0</span> <span class="token operator">?</span> <span class="token string">'selected'</span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">+</span><span class="token string">'>'</span><span class="token operator">+</span> item<span class="token punctuation">.</span>dataName <span class="token operator">+</span><span class="token string">'</option>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|||
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|||
|
|
<span class="token comment">// 渲染表单下拉框</span>
|
|||
|
|
form<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token string">'dataForm'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|||
|
|
callback <span class="token operator">?</span> <span class="token function">callback</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
|
|||
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">code<span class="token punctuation">,</span> data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|||
|
|
top<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">msg</span><span class="token punctuation">(</span>data<span class="token punctuation">.</span>msg<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|||
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span>
|
|||
|
|
<span class="token punctuation">}</span>
|
|||
|
|
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
|
|||
|
|
←
|
|||
|
|
<a href="/code-template/excel-upload.html" class="prev">
|
|||
|
|
EasyExcel 上传（导入）
|
|||
|
|
</a></span> <span class="next"><a href="/code-template/list-select.html">
|
|||
|
|
列表选择
|
|||
|
|
</a>
|
|||
|
|
→
|
|||
|
|
</span></p></div> </main></div><div class="global-ui"></div></div>
|
|||
|
|
<script src="/assets/js/app.8419454b.js" defer></script><script src="/assets/js/2.3324ea8d.js" defer></script><script src="/assets/js/13.128ee0cc.js" defer></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|