ブートストラップマルチセレクトでoptグループ値を取得する方法

var data = [ 
{ 
    "label": "WKS-FINGER1", 
    "children": [ 
    { 
    "label": "WKS1", 
    "value": "WKS1" 
    }, 
    { 
    "label": "WKS2", 
    "value": "WKS2" 
    }, 
    { 
    "label": "WKS2", 
    "value": "WKS2" 
    } 
    ] 
}, 
{ 
    "label": "WKS-FINGER", 
    "children": [ 
    { 
    "label": "WKS3", 
    "value": "WKS3" 
    } 
    ] 
}, 
{ 
    "label": "WKS-FINGER2", 
    "children": [ 
    { 
    "label": "WKS4", 
    "value": "WKS4" 
    } 
    ] 
} 
]; 

$('#myid').multiselect({ 
      enableClickableOptGroups: true, 
      buttonWidth: '200px', 
      onChange: function(option, checked, selected,element) { 

       var selectionData = []; 
        $('#myid option:selected').each(function() { 

         selectionData.push([$(this).val() , $(this).data('order') ]); 
       }); 
        alert(selectionData); 

} 
     }); 
         $('#myid').multiselect('dataprovider', data);

上記のコードに従って、ドロップダウンからオプション値を取得できますが、値が選択されている場合でも選択したグループの値を取得する方法。たとえば。誰かがWKS-FINGER1グループを選択した場合、グループ値WKS-FINGER1が必要であり、オプション値ではなく、その逆も必要です。ブートストラップマルチセレクトでoptグループ値を取得する方法

出典

2016-04-15 Srinivas Gadilli

JsFiddle Demo

を参照してください。探しています。

<body> 
    <div id="multiselection"> 
    <select id="myid" multiple="multiple"> 
    </select></div> 
    <span id="output"></span> 

</body> 

     $(document).ready(function() { 
      $(function() { 
       var data = [{ 
        "label": "WKS-FINGER1", 
        "children": [{ 
         "label": "WKS1", 
         "value": "WKS1" 
        }, { 
         "label": "WKS2", 
         "value": "WKS2" 
        }] 
       }, { 
        "label": "WKS-FINGER", 
        "children": [{ 
         "label": "WKS3", 
         "value": "WKS3" 
        }] 
       }, { 
        "label": "WKS-FINGER2", 
        "children": [{ 
         "label": "WKS4", 
         "value": "WKS4" 
        }] 
       }]; 

       $('#myid').multiselect({ 
        enableClickableOptGroups: true, 
        buttonWidth: '200px', 

        onChange: function(option, checked, selected, element) { 

         var temp = jQuery.extend(true, {}, newData); 

         var selectionData = []; 
         var selectionGroup = []; 
         $('#myid option:selected').each(function(e) { 
          for (n in newData) { 
           for (d in newData[n]) { 
            if (newData[n][d].value == $(this).val()) { 
             for (i in temp[n]) { 
              if (temp[n][i].value == $(this).val()) 
               temp[n].splice(i, 1); 
             } 

            } 
           } 

          } 
          selectionData.push($(this).val()); 
         }); 

         for (t in temp) { 
          if (temp[t].length == 0) { 
           selectionGroup.push(t); 
          } else { 
           for (tt in newData[t]) { 
            if (newData[t][tt] == temp[t][tt]) { 
             selectionData.push(newData[t][tt]["value"]); 
            } 
           } 
          } 

         } 
         console.log("Group : " + selectionGroup); 
         console.log("Data : " + selectionData); 
         $("#output").html("Group : " + selectionGroup + "<br>Data : " + selectionData); 
         //alert("Group : " + selectionGroup + "\nData : " +selectionData); 

        } 
       }); 
       var newData = {}; 
       $('#myid').multiselect('dataprovider', data); 
       var clonedData = jQuery.extend(true, {}, data); 
       for (i in clonedData) { 
        newData[clonedData[i]["label"]] = clonedData[i]["children"]; 
       } 
      }); 
     });

出典

2016-04-19 09:45:34 Nofi

それは私のために働くおかげで。なぜグループラベルがチェックボックスを持たないのか –

私はあなたがdocumentationで説明したようにのonChangeコールバックの内側に親オプショングループにアクセスする必要が正しく理解している場合：

var $option = $(option); 
var $group = $option.parent('optgroup'); 
alert($group[0].label);

これは何であると思いますexample

出典

2016-04-19 07:11:37 pythagor

私の[fiddle]（https://jsfiddle.net/b8wsxr89/1/）は、グループが選択されたときにグループを取得でき、値を保持するデータセットを維持する必要があるはずです選択されたデータセットのみの –

あなたはdocumentationのさらなる実施例のセクション（このセクションの最後の例にスクロールダウン）で最後の例をチェックしたい場合があります。この例では、特定のオプショングループ内で選択されたオプションの数を制限しています。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#example-optgroup-limit').multiselect({ 
      onChange: function(options, checked) { 
       var $option = $(options); 
       // This example works onyl for selection one option a time, has to be adapted to your case ... 
       if ($option.length == 1) { 
        // This is the important part for you: get the parent optgroup: 
        var $group = $option.parent('optgroup') 
        // Here, the properties of the optgroup can be checked ... 
        if ($group.hasClass('group-1')) { 
         var $options = $('option', $group); 
         $options = $options.filter(':selected'); 

         if (checked && $options.length > 2) { 
          alert('Cannot select more than 2 elements in this group!'); 
          $("#example-optgroup-limit").multiselect('deselect', $option.val()); 
         } 
        } 
       } 
      } 
     }); 
    }); 
</script> 
<div class="btn-group"> 
    <select id="example-optgroup-limit" multiple="multiple"> 
     <optgroup class="group-1" label="Group 1"> 
      <option value="1-1">Option 1.1</option> 
      <option value="1-2">Option 1.2</option> 
      <option value="1-3">Option 1.3</option> 
     </optgroup> 
     <optgroup class="group-2" label="Group 2"> 
      <option value="2-1">Option 2.1</option> 
      <option value="2-2">Option 2.2</option> 
      <option value="2-3">Option 2.3</option> 
     </optgroup> 
    </select> 
</div>

あなたは一例を適応させることができます：あなたがクリックした/変更されたオプションからオプショングループラベルをDERIVするため、これは興味深い部分である - onChangeオプションでは、オプショングループが変更されたオプション（複数可）に由来していますクラスの代わりに$group.attr('label')を照会して、残りのコードを、クリックしたオプションから派生したグループのラベルでやりたいもので置き換えます。

出典

2016-04-19 12:20:59

ドキュメント上の 'enableClickableOptGroups：true'は、ドロップダウンボックスのグループに対してチェックボックスを与えるべきですが、[fiddle]（https://jsfiddle.net/Nofiden/b8wsxr89/4/））私はチェックボックスを取得していません。 –

ブートストラップマルチセレクトでoptグループ値を取得する方法

答えて

関連する問題