다중 선택 드롭 다운에 동적으로 체크 박스 추가하기

Question

나는 몇 시간 동안이 문제에 갇혀 있었고 나는 미쳐 버릴 것입니다! 체크 박스 드롭 다운이 필요합니다. 선택 상자에 동적으로 채 웁니다. 또한 jquery로 deep-clone하는 각 multiselect 드롭 다운을 여러 개의 <div> 요소에 추가해야합니다. 그러나이 작업을 수행 할 때마다 복제 된 요소는 다중 선택 가능 항목의 목록으로 렌더링됩니다 (드롭 다운이 아닌 모든 스타일링이 손실 됨). 이것은 내가 내 체크 박스를 추가하고자하는 다중 선택 컨테이너입니다 :) (.multiselect 호출하여 마침내 복제 된 각 드롭 다운을 초기화

<select class="multiselect1" multiple="multiple"> 


</select> 

; 나는이를 위해 사용하고있는 라이브러리입니다 : 위의 라인을 실행하면 http://davidstutz.github.io/bootstrap-multiselect/

 $('.multiselect1').multiselect(); 
     var filterClone = $('.multiselect1').clone(true); 
     //filterClone.multiselect(); 
     $('body').append(filterClone[0]); 

는 선택 요소가 실제로 몸에 존재하지만 보이지 않습니다. 스타일 속성을 제거하면 요소가 표시되지만 다중 선택 가능 항목 목록으로 렌더링됩니다 (예상 됨). 하지만 복제 된 다중 선택 드롭 다운이 왜 처음에는 전혀 표시되지 않습니까?

javascript 또는 jquery를 사용하여 솔루션 (또는 솔루션 자체!)으로 이어질 수있는 제안 사항이 가장 만족 스러울 것입니다.

Answer 1

이 작업을하려면 JQuery가 필요합니다. JQuery를 포함 시켰습니까? 만약 당신이 이것을 사용할 수 없다면 : <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 모든 파일을 서버에 업로드 했습니까?

귀하의 웹 사이트에서이 코드를 사용해보십시오. 작동합니까?

HTML :

<select id="SOExample" multiple="multiple"> 
    <option value="Love it!">Love it!</option> 
    <option value="Hate it!">Hate it!</option> 
    <option value="I don't know...">I don't know...</option> 
</select> 

JS :

마티 멜 처스 @

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#SOExample').multiselect(); 
    }); 
</script>