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

こんにちは私はブートストラップマルチセレクションjsを使用しています。 onChangeイベントブートストラップマルチセレクトjsを使用してオプション値とグループ値を取得できます。私はhrsと呼ばれる別のドロップダウンを持っています。これは、基本的なHTMLドロップダウンボックスです。外部からブートストラップマルチセレクトでoptグループ値を取得する方法

今私の要求は私がhrsドロップダウンボックスを変更するときです。私はこのドロップダウン値とブートストラップマルチ選択もドロップダウン値を取得する必要があります。

HTMLのCODE：

<body> 
    <select id="hrs"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
    </select> 
    <div id="multiselection"> 
     <select id="myid" multiple="multiple"> 
     </select> 
    </div> 
    <span id="output"></span> 
</body>

JSコード：

$(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-05-09 Srinivas Gadilli

#hrsに変更イベントリスナーを追加してみてください - これはあなたのための値を取得します

$("#hrs").on("change",function(){ 
    var sel1 = $(this).find(":selected").val(); 
    var sel2 = getSelectValues(document.getElementById('myid')); // for multi select options 
});

ボットh hrsのselectのメニューをドロップダウンします。

私はgetSelectValuesを使用して、マルチ選択ボックスから選択した値をanswerから取得しました。

fiddleを参照してください。

出典

2016-05-09 05:08:07 Bhumika107

Hi $（ '＃myid'）。find（ "：selected"）。val（）;選択された値のリストから最初の値のみを与えています。一度チェックしてください。 –

@SrinivasGadilli私の答えを編集しました – Bhumika107

<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-05-09 05:51:24 Mia

@Aamir私はあなたの答えに答えを見ませんでした。 –

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

答えて

関連する問題