optgroup select all

最新推荐文章于 2022-11-29 20:12:43 发布

屈文哲

最新推荐文章于 2022-11-29 20:12:43 发布

阅读量979

点赞数

分类专栏：【Web前端】文章标签： optgroup select all

本文链接：https://blog.csdn.net/quwenzhe/article/details/62232590

版权

【Web前端】专栏收录该内容

23 篇文章 0 订阅

订阅专栏

我们在做项目时，经常会用到select查询。如果select有很多个选项，我们为了方便查看，会用optgroup分组显示：

<select multiple="multiple" id="model">
  <optgroup label="A">
    <option value ="A1">A1</option>
    <option value ="A2">A2</option>
  </optgroup>
  <optgroup label="B">
    <option value ="B1">B1</option>
    <option value ="B2">B2</option>
  </optgroup>
</select>

但optgroup有些缺陷：不能点击，也不能点击父类全部选中子类。
针对optgroup的上述问题，我们进行了改造。
我们思路为父子都定义为option，用css控制父子的显示。

.optionGroup {
    font-weight: bold;
    font-style: italic;
}

.optionChild {
    padding-left:15px;
}

父类option的value="group"，class="optionGroup"；
子类option的name为父类option的text，这步是方便根据父类找到对应的子类，class="optionChild"。
然后我们在select上加上onchange事件：onchange="selectChild();"。
当select选中父选项时，由于父选项的value为group，我们通过var selectItemText = $('#model option:selected').text();获取父选项的text，然后到select查询option name为父类text的选项，然后设置为选中状态。
动态拼接select的代码如下：

function setOpt_model(opdata, model) {
  $("#yonghujixing").html('');
  var op = '<select multiple="multiple" size="5"  name="model"  id="model" onchange="selectChild();" class="col-xs-10 col-sm-10">';
  if (model == null || model == "" || model == ",-1,"){
    op += "<option value='All' selected=\"selected\">全部</option>";
  }
  else{
    op += "<option value='All'>全部</option>";
  }
  for (var index = 0; index < opdata.length; index ++) {
      var parentInfo = opdata[index];
      $.each(parentInfo,
      function(key) {
          var childArray = parentInfo[key];
          op += "<option value=\"group\" class=\"optionGroup\">" + key + "</option>";
          for (var childIndex = 0; childIndex < childArray.length; childIndex++) {
              var childObj = childArray[childIndex];
              if (model.indexOf("," + childObj.code + ",") >= 0) {
                op += "<option value=" + childObj.code + " name=" + key + " class=\"optionChild\" selected=\"selected\">" + childObj.name + "</option>";
              }
              else{
                op += "<option value=" + childObj.code + " name=" + key + " class=\"optionChild\">" + childObj.name + "</option>";
              }
          }
      });
  }
  op += "</select>";
  $("#yonghujixing").append(op);
}

select的onchange事件代码如下：

function selectChild(){
   var selectItemValue = $('#model option:selected').val();
   var selectItemText = $('#model option:selected').text();
   if(selectItemValue == "group"){
      var childArray = $("#model option[name='" + selectItemText + "']");
      for(var index = 0; index < childArray.length; index++){
         var selectValue = childArray[index].value;
         $("#model option[value='" + selectValue + "']").prop("selected", true);
      }
   }
}