Select选择菜单

当选项过多时,使用下拉菜单展示并选择内容。

基础用法

<select name="sishu" id="sishu">
   <option value="">你喜欢?</option>
   <option value="论语">《论语》</option>
   <option value="孟子">《孟子》</option>
   <option value="大学">《大学》</option>
   <option value="中庸">《中庸》</option>
</select>
<!--JS使用方法-->
<script>
   Vus.select('select', { // 选择菜单元素
      width: '168px', // 宽度
      maxWidth: '268px', // 最大宽度
      scroll: true, // true/false 是否加滚动条
      btnStyle: 'primary', // select按钮样式,请参阅按钮API
      placeholder: '请选择...' // placeholder
   });
</script> 

基础多选

select元素中添加multiple属性设置为多选。

<select name="lang" id="lang" multiple="multiple">
   <option value="">懂啥技术?</option>
   <option value="css">CSS</option>
   <option value="html">HTML</option>
   <option value="js">JavaScript</option>
   <option value="python">Python</option>
   <option value="...">...</option>
</select>
<!--JS使用方法-->
<script>
   Vus.select('select', { // 选择菜单元素
      width: '168px', // 宽度
      maxWidth: '268px', // 最大宽度
      scroll: true, // true/false 是否加滚动条
      btnStyle: 'primary', // select按钮样式,请参阅按钮API
      placeholder: '请选择...' // placeholder
   });
</script>

禁用状态

select元素或者<option>标签添加disabled属性设置为禁用。也可以在JS参数里设置:disabled: true

<select name="sex" id="sex" disabled="disabled">
   <option value=""></option>
   <option value="nan">男</option>
   <option value="nv">女</option>
</select>
<!--JS使用方法-->
<script>
   Vus.select('#sex', { // 选择菜单元素
      disabled: false // true/false 是否禁用
   });
</script>