Only optgroup multiple (bootstrap-select) 只有optgroup多选(bootstrap-select)

huangapple go评论60阅读模式
英文:

Only optgroup multiple (bootstrap-select)

问题

我正在使用 https://github.com/snapappointments/bootstrap-select/ v1.13.18,并且我需要提供一个<select>对象,其中只有optgroup选项可以是多选的。因此,如果我们选择非optgroup选项,所有其他选项都会取消选择(包括optgroup选项),如果我们选择optgroup选项,则所有非optgroup选项都会取消选择,但可以选择其他optgroup选项。是否有内置的方法可以实现这一点,还是必须从头开始编写?

英文:

I am using https://github.com/snapappointments/bootstrap-select/ v1.13.18 and I need to provide <select> object, where only optgroup options can be multiple. So if we select non optgroup option, all other options are being deselect (including optgroup options) and if we select optgroup option all non optgroup options are being deseleted, but it is possible to select other optgroup options. Is there any built-in way to do this or it has to be written from scratch?

&lt;select class=&quot;selectpicker&quot; data-container=&quot;body&quot; id=&quot;levels&quot;&gt;
&lt;option value=&quot;1&quot;&gt;My tasks&lt;/option&gt;
&lt;optgroup id=&quot;departments&quot; label=&quot;Departments tasks:&quot; multiple&gt;
&lt;option value=&quot;8&quot;&gt;Service&lt;/option&gt;
&lt;option value=&quot;1&quot;&gt;Production&lt;/option&gt;
&lt;/optgroup&gt;
&lt;option value=&quot;3&quot; selected=&quot;&quot;&gt;All tasks&lt;/option&gt;
&lt;/select&gt;

答案1

得分: 0

以下是您要翻译的代码部分:

const levels = document.getElementById("levels");
var levels_selected_previous = Array.from(levels.selectedOptions);
levels.addEventListener("change", (e) => {
  e.preventDefault();
  let levels_selected_current = Array.from(levels.selectedOptions);
  let last_selected_array = levels_selected_current.filter(el => !levels_selected_previous.includes(el));
  if(last_selected_array.length > 0){
    let last_selected = last_selected_array[0].parentElement.nodeName;
    levels_selected_current.forEach(function(el) {
      if(last_selected === "OPTGROUP"){
        if (el.parentElement.nodeName !== "OPTGROUP") {
          el.selected = false;
        }
      } else {
        if (el.parentElement.nodeName === "OPTGROUP") {
          el.selected = false;
        } else if(el.parentElement.nodeName !== "OPTGROUP") {
          if (el !== last_selected_array[0]) {
            el.selected = false;
          }
        }
      }
    });
  }
  $(levels).selectpicker('refresh');
  levels_selected_previous = levels_selected_current;
});

如果您需要进一步的翻译或有其他问题,请告诉我。

英文:

Finally I made something like this:

const levels = document.getElementById(&quot;levels&quot;);
var levels_selected_previous = Array.from(levels.selectedOptions);
levels.addEventListener(&quot;change&quot;, (e) =&gt; {
  e.preventDefault();
  let levels_selected_current = Array.from(levels.selectedOptions);
  let last_selected_array = levels_selected_current.filter(el =&gt; !levels_selected_previous.includes(el));
  if(last_selected_array.length&gt;0){
    let last_selected = last_selected_array[0].parentElement.nodeName;
  levels_selected_current.forEach(function(el) {
    if(last_selected===&quot;OPTGROUP&quot;){
    if (el.parentElement.nodeName !== &quot;OPTGROUP&quot;) {
      el.selected = false;
    }
  } else {
    if (el.parentElement.nodeName === &quot;OPTGROUP&quot;) {
      el.selected = false;
    } else if(el.parentElement.nodeName !== &quot;OPTGROUP&quot;) {
      if (el !== last_selected_array[0]) {
        el.selected = false;
      }
    }
  }
});
}
$(levels).selectpicker(&#39;refresh&#39;);
levels_selected_previous = levels_selected_current;
});

huangapple
  • 本文由 发表于 2023年5月14日 17:58:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/76246860.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定