D3 Examples - test b drp dwn2

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="bootstrap-toggle.min.js"></script>
<link rel="stylesheet" href="bootstrap-toggle.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
  
<style>
    body {
  padding: 15px;
}
/* each line in dropdown */
/* .checkbox-menu li label {
    display: block;
    padding: 0px 20px;
    font-weight: normal;
    color: #333;
} */
/* .checkbox-menu li input {
    margin: 0px 0px;
    top: 0px;
    position: relative;
} */
​
.checkbox-menu22 li.active label {
    background-color: #5aa8f6;
    font-weight:1;
}
​
/* hover on each line in dropdown */
.checkbox-menu22 li:hover,
.checkbox-menu22 li:focus {
    background-color: #b6f7fb !important;
}
​
/* .checkbox-menu li.active label:hover,
.checkbox-menu li.active label:focus {
    background-color: yellow;
} */
  
​
.btn-danger {
        color: #333;
        background-color: indianred;
        border-color: #d43f3a;
}
.btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus{
    color: #333;
    background-color: #d4d4d4;
    border-color: #8c8c8c;
  }  
.btn:hover,.btn:focus, .btn:active{
/*     background-color: #b8b8ff; */
    border-color: #d43f3a;
  } 
.btn {
    display: inline-block;
    padding: 2px 10px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: -3.428571444;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
   }
  
.toggle-on.btn-sm:hover {    
    background-color: #d4d4d4; 
    border-color: #d43f3a;
  }
.toggle-off.btn-sm:hover {    
    background-color: #d4d4d4; 
    border-color: #d43f3a;
  }  
.toggle-on.btn-sm {
    padding-right: 20px;
    color: #333;
    font-weight: 600;
    background-color: indianred; 
    /*border-width: 1px;  
    border-color: #d43f3a;
    /*width: 12px;*/
  }
.toggle-handle.btn.btn-default.btn-sm{
    background-color: brown;
  }
​
.toggle.btn-sm{
  min-width: 50px;
  min-height: 30px;
  border-color: #d43f3a;
  border: #d43f3a;
  border-width: 5px;
}  
  
  </style>
</head>
​
<body>
  
  <div class="dropdown">
  <button class="btn btn-danger dropdown-toggle" type="button"id="dropdownMenu1" data-toggle="dropdown" 
          aria-haspopup="true" aria-expanded="true" style="height :34px; width:165px;   border-color: #d43f3a;  border-width: 3px;outline-color: transparent;"> Explore Details <span class="caret"></span>
  </button>
    
  <ul id="drop" class="dropdown-menu checkbox-menu22 allow-focus22" aria-labelledby="dropdownMenu1" style="min-width:165px ; text-align:left;">  
​
    
<!--     <li >
      <label class="check" style= "display: block;padding: 0px 20px; font-weight: bold;color: #333; ">
        <input type="checkbox" value="hv1H"> hv1H
      </label>
    </li>
    <li >
      <label class="check" style= "display: block;padding: 0px 20px; font-weight: bold;color: #333; ">
        <input type="checkbox" value="hv2H"> hv2H
      </label>
    </li>
    
    <li >
      <label class="check" style= "display: block;padding: 0px 20px; font-weight: bold;color: #333; ">
        <input type="checkbox" value="hv3H"> hv3H
      </label>
    </li> -->
    
  </ul>
</div>
  
  
  <script>
    
function addCheckbox(name) {
   var container = $('#drop');
   var id = container.find('input').length+1; 
        
   var container2= $('<li />', {id:id, style:"width:165px ; text-align:left;"}).appendTo(container);
   $('<input />', { type: 'checkbox', id: 'cb'+id, value: name, style: "display: inline-block; margin-left:20px;vertical-align: sub;    width: 15px;height: 15px;" }).appendTo(container2);
   var label=$('<label />', { 'for': 'cb'+id, text: name,class:"check", style: "display: inline-block;padding: 0px 0px; font-weight: bold;color: #333;min-width: 125px;    margin-left: 5px; margin-bottom: 0px;" }).appendTo(container2);
}
​
 var numbertochr={"0":  "hv1H", "1": "hv2H", "2": "hv3H","3": "hv4H", "4": "hv5H", "5":  "hv6H", "6":  "hv7H",
                     "7":  "ta1A", "8":"ta2A", "9":  "ta3A", "10": "ta4A", "11": "ta5A", "12":  "ta6A", "13":  "ta7A",
                     "14":  "ta1B", "15":"ta2B", "16":  "ta3B", "17": "ta4B", "18": "ta5B", "19":  "ta6B", "20":  "ta7B",
                     "21":  "ta1D", "22":"ta2D", "23":  "ta3D", "24": "ta4D", "25": "ta5D", "26":  "ta6D", "27":  "ta7D"                     
                     };
    
var keys=Object.keys(numbertochr);
for(var i=0; i<keys.length;i++){  
   addCheckbox(numbertochr[keys[i]]);
  
}
    
    
    $(".checkbox-menu22").on("change", "input[type='checkbox']", function() {
//    $(this).closest("li").toggleClass("active", this.checked);
    $(this).closest("li")["0"].style.backgroundColor ="#5aa8f6";
//     console.log($(this).closest("li")["0"].style.backgroundColor);    
//     console.log($(this).prop('checked'));        
    if($(this).prop('checked')) $("#dropdownMenu1").html("Explore Details: " + $(this).val()  + " <span class=\"caret\"></span>");
    else {
      $("#dropdownMenu1").html("Explore Details " + "" + "<span class=\"caret\"></span>");
      $(this).closest("li")["0"].style.backgroundColor ="transparent";
    }
​
});
​
$(document).on('click', '.allow-focus22', function (e) {
  e.stopPropagation();
});
​
// to turn other checkbox to uncheck
$('input:checkbox').click(function() {
    $('input:checkbox').not(this).prop('checked', false);
//   $('input:checkbox').not(this).closest("li").toggleClass("active", false);
  var templi= $('input:checkbox').not(this).closest("li");
//   console.log(templi.length);
  for (var l=0;l<templi.length;l++){
    templi[l].style.backgroundColor ="transparent";
  }
});   
​
  </script>
</body>
​
    