怎么让下拉框SELECT多选？

Posted 2023-04-11

参考技术A 应该是这个吧
<SELECT name=menu1 onchange="MM_jumpMenu('parent',this,0)"
style="HEIGHT: 20px; WIDTH: 80px"> <OPTION selected>选择地点</OPTION>
<OPTION value=/default-qz.php>全国</OPTION> <OPTION
value=/default-bj.php>北京</OPTION> <OPTION
value=/default-sh.php>上海</OPTION> <OPTION
value=/default-gz.php>广州</OPTION> <OPTION
value=/default-sz.php>深圳</OPTION> <OPTION
value=/default-xa.php>西安</OPTION> <OPTION
value=/default-wh.php>武汉</OPTION> <OPTION
value=/default-hz.php>杭州</OPTION> <OPTION
value=/default-cd.php>成都</OPTION></SELECT>
<SCRIPT language=javascript><!--function MM_jumpMenu(targ,selObj,restore) //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;//--></SCRIPT>在select中加multiple即可!如:<select multiple>
<option>a</option>
<option>b</option>
<option>c</option></select>控件本身好像不支持复选，想点别的办法吧，反正只要实现了就行，例如自己写javascript效果。
<select multiple name="selectedjob" size="7" style="WIDTH: 190px"></select>就是加一个multiple属性，但是如果你要控制多选的个数，那就用脚本控制了。
要单纯做下拉的没办法~~~真正想做的话自己用JS做吧~~多选时用Ctrl+左键1、下拉框多选加：multiple 即可
<select multiple name="jj">
<option value=1>one</option>
<option value=2>two</option></select>2、下拉框不一定就下拉，可以象列表框，只要size值>1既可试试这<select multiple name="jj" size=3>
<option value=1>one</option>
<option value=2>two</option></select>又下拉又多选似乎不行
你变通一下，做个其他的，onSubmit时传给hidden的就可以了本回答被提问者采纳

Element-ui中 选择器（select）多选下拉框实现全选功能

需求：

选择器组件（Select）支持多选，但是不支持全选。如果需要实现这个功能，该怎么修改呢？

方案一：下拉项增加一个【全选】，实现以下几种功能

• 下拉选项全都勾选时，【全选】自动勾选；
• 下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选；
• 下拉选项全都勾选时，点击【全选】后，所有下拉选项不勾选；
• 下拉选项和【全选】都选上的时候，不勾选任意下拉选项，【全选】按钮就不勾选了；

效果：

方案二：直接添加一个【全选】复选框，实现的功能与方案一相同

效果：

完整代码

父组件

<template>
  <div>
    <MultipleSelect
      :selectOptions="selectOptions"
      :mulSelectLoading="mulSelectLoading"
      :mulSelecteds="mulSelecteds"
      @update:updateMultipleSelect="val => mulSelecteds = val">
    </MultipleSelect>

    <MultipleSelect2
      :selectOptions="selectOptions2"
      :mulSelectLoading="mulSelectLoading2"
      :mulSelecteds="mulSelecteds2"
      @update:updateMultipleSelect="val => mulSelecteds2 = val">
    </MultipleSelect2>
  </div>
</template>
 
<script>
import MultipleSelect from './child.vue';
import MultipleSelect2 from './child2.vue'
export default {
  data() { 
    return {
      selectOptions:[],
      mulSelectLoading:false,
      mulSelecteds:[],
      selectOptions2:[],
      mulSelectLoading2:false,
      mulSelecteds2:[],
    } 
  }, 
  components:{
    MultipleSelect,
    MultipleSelect2,
  },
  methods: {
    mockData(){
      this.mulSelectLoading = true;
      this.mulSelectLoading2 = true;
      setTimeout(()=>{
        const options = [
          { label: '上海', value: 'sh' },
          { label: '南京', value: 'nj' },
          { label: '重庆', value: 'cq' },
          { label: '武汉', value: 'wh' },
        ]
        this.selectOptions = options;
        this.mulSelectLoading = false;
        this.mulSelecteds = ['cq','nj'];
        this.selectOptions2 = options;
        this.mulSelectLoading2 = false;
        this.mulSelecteds2 = ['cq','nj'];
      },1500)
    },
  },  
  mounted(){
    this.mockData();
  }
}
</script>  

方案一：

<template>
  <el-select 
    size="mini" 
    multiple 
    filterable
    :disabled="disabled"
    v-model='selectedArr' 
    :loading="mulSelectLoading"
    :collapse-tags="collapseTags"
    placeholder='请选择'
    @change='changeSelect' 
    @remove-tag='removeTag'>
    <el-option label='全选' value='全选' @click.native='selectAll' v-if="selectOptions.length"></el-option>
    <el-option v-for='item in selectOptions' :key='item.value' :label='item.label' :value='item.value'></el-option>
  </el-select>
</template>

<script>
export default {
  name: 'MultipleSelect',
  data() {
    return {
      selectedArr: [],
    }
  },
  props:{
    // 选项
    selectOptions:{
      type:Array,
      default(){
        return []
      }
    },
    // 是否禁用
    disabled:{
      type:Boolean,
      default:false
    },
    // 已选中选项
    mulSelecteds:{
      type:Array,
      default(){
        return []
      }
    },
    mulSelectLoading:{
      type:Boolean,
      default:false
    },
    collapseTags:{
      type:Boolean,
      default:true   
    }
  },
  methods: {
    selectAll() {
      if (this.selectedArr.length < this.selectOptions.length) {
        this.selectedArr = []
        this.selectOptions.map((item) => {
          this.selectedArr.push(item.value)
        })
        this.selectedArr.unshift('全选');
      } else {   // 取消全选
        this.selectedArr = [];
      }
      this.$emit('update:updateMultipleSelect',this.selectedArr);
    },
    changeSelect(val) {
      if (!val.includes('全选') && val.length === this.selectOptions.length) {
        this.selectedArr.unshift('全选')
      } else if (val.includes('全选') && (val.length - 1) < this.selectOptions.length) {
        this.selectedArr = this.selectedArr.filter((item) => { return item !== '全选'})
      }
      this.$emit('update:updateMultipleSelect',this.selectedArr);
    },
    removeTag(val) {
      if (val === '全选') {
        this.selectedArr = [];
        this.$emit('update:updateMultipleSelect',this.selectedArr);
      }
    }
  },
  watch:{
    mulSelecteds:{
      handler(newVal,oldVal){
        this.selectedArr = newVal;
        if (!this.selectedArr.includes('全选') && 
             this.selectedArr.length && 
             this.selectedArr.length === this.selectOptions.length) 
        {
          this.selectedArr.unshift('全选')
        }
      },
      immediate: true
    }
  }
}
</script>

方案二：

<template>
  <el-select 
    size="mini" 
    multiple 
    filterable
    :disabled="disabled"
    :loading="mulSelectLoading"
    :collapse-tags="collapseTags"
    v-model='selectedArr' 
    placeholder='请选择'
    @change='changeSelect' >
    <el-checkbox v-model="checked" @change='selectAll'>全选</el-checkbox>
    <el-option v-for='item in selectOptions' :key='item.value' :label='item.label' :value='item.value'></el-option>
  </el-select>
</template>


<script>
export default {
  data() {
    return {
      checked: false,
      selectedArr: [],
    }
  },
  props:{
    // 选项
    selectOptions:{
      type:Array,
      default(){
        return []
      }
    },
    // 是否禁用
    disabled:{
      type:Boolean,
      default:false
    },
    // 已选中选项
    mulSelecteds:{
      type:Array,
      default(){
        return []
      }
    },
    mulSelectLoading:{
      type:Boolean,
      default:false
    },
    collapseTags:{
      type:Boolean,
      default:true   
    }
  },
  methods: {
    selectAll() {
      this.selectedArr = [];
      if (this.checked) {
        this.selectOptions.forEach((item) => { this.selectedArr.push(item.value )});
      } else {
        this.selectedArr = [];
      }
      this.$emit('update:updateMultipleSelect',this.selectedArr);
    },
    changeSelect(val) {
      if (val.length === this.selectOptions.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
      this.$emit('update:updateMultipleSelect',this.selectedArr);
    }
  },
  watch:{
    mulSelecteds:{
      handler(newVal,oldVal){
        this.selectedArr = newVal;
        if (this.selectedArr.length && 
            this.selectedArr.length === this.selectOptions.length) 
        {
          this.checked = true;
        }
      },
      immediate: true
    }
  }
}
</script>

<style lang="stylus" scoped>
.el-checkbox {
  text-align: right;
  width: 90%;
}
</style>