Select checkbox dropdown inside select checkbox dropdown?

Question

I want to create a Select checkbox list under the Select Checkbox dropdown again. What do I have to do?

Sample i need

☑ C 1 : name

       ☐ C 1.1 : name

       ☑ C 1.2 : name

☐ C2 : name

☐ C3 : name

My code

form views

     <label>Standard List</label>
            <select type="button"id="framework" name="framework[]" multiple class="form-control" >
            <option class="dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" value="Codeigniter">Codeigniter</option>
            <option value="CakePHP">CakePHP</option>
            <option value="Laravel">Laravel</option>
            <option value="YII">YII</option>
            <option value="Zend">Zend</option>
            <option value="Symfony">Symfony</option>
            <option value="Phalcon">Phalcon</option>
            <option value="Slim">Slim</option>
            </select>

Js :

      $(document).ready(function(){
     $('#framework').multiselect({
    nonSelectedText: 'Choose...',
     enableFiltering: true,
      enableCaseInsensitiveFiltering: true,
   buttonWidth:'400px'
   });
  });

Answer 1

Not using JQuery: (Just DOM)

HTML:

<!--------C1------------>
<input type="checkbox" id="c1" onclick="check()">
<label>C 1</label><br>
<div id="c1-hidden" style="display:none">
    &ensp;&ensp;&ensp;&ensp;<input type="checkbox" id="c1" onclick="check()">
    <label>C 1.1</label><br>
     &ensp;&ensp;&ensp;&ensp;<input type="checkbox" id="c1" onclick="check()">
<label>C 1.2</label>
</div>

<!--------C2------------->
<input type="checkbox" id="c2" onclick="check()">
<label>C 2</label><br>
<div id="c2-hidden" style="display:none">
    &ensp;&ensp;&ensp;&ensp;<input type="checkbox" id="c1" onclick="check()">
    <label>C 2.1</label><br>
     &ensp;&ensp;&ensp;&ensp;<input type="checkbox" id="c1" onclick="check()">
<label>C 2.2</label>
</div>

<!--------C3------------->
<input type="checkbox" id="c3" onclick="check()">
<label>C 3</label>
<div id="c3-hidden" style="display:none">
    &ensp;&ensp;&ensp;&ensp;<input type="checkbox" id="c1" onclick="check()">
    <label>C 3.1</label><br>
     &ensp;&ensp;&ensp;&ensp;<input type="checkbox" id="c1" onclick="check()">
<label>C 3.2</label>
</div>

Javascript:

<script>
var checkboxes = ["c1","c2","c3"];
function check(){
    checkboxes.forEach(item=>{
        if(document.getElementById(item).checked==true){
            document.getElementById(item+"-hidden").style.display = "block";
        }else{
document.getElementById(item+"-hidden").style.display = "none";
        }
    });
}

</script>

Hope this helps :)