SelectBoxIt - 여러 페이지에서 선택 (동적)

필요한 경우 여러 개의 선택 상자가있는 페이지가 있습니다. 나는 this plugin을 사용하여 선택 상자의 스타일을 지정합니다.SelectBoxIt - 여러 페이지에서 선택 (동적)

$('body').on('click', '.add_option.add_title', function() { 
    $('.add_title_option').after($('.add_title_option .controls').html()); 
});

이것은 선택 상자를 "복제"한 다음 추가하는 자바 스크립트입니다.

<div class="add_title_option"> 
    <div class="control-group"> 
     <label class="control-label" for="title">Title</label> 
     <div class="controls"> 
      <select id="title" name="title"> 
       <option></option> 
       <option value="1">Option #1</option> 
       <option value="2">Option #2</option> 
       <option value="3">Option #3</option> 
       <option value="4">Option #4</option> 
      </select> 
      <a href="javascript:false;" class="add_option add_title"> 
       <img src="<?=base_url();?>assets/img/add_options.png" alt="" /> 
      </a> 
     </div> 
     <div class="error" id="title_error"></div> 
    </div> 
</div>

자신을 "복제"하지만 선택은 기능하지 않습니다.

자바 스크립트를 통해 여러 개의 선택을 추가하려면 어떻게해야합니까?

출처

2013-10-09 Ivanka Todorova

"작동하지 않음"이란 무엇입니까? – k102

스타일이 표시되지만 "선택"은 아무 것도하지 않습니다. 클릭 할 때 옵션 등이 표시되지 않습니다. –

$('body').on('click', '.add_option.add_title', function() { 
    $('.add_title_option').after($('#title').clone()); 
});

출처

2013-10-09 13:17:52 andygoestohollywood

당신은 그것을 복제하기 위해

$('.add_title_option').after($('.add_title_option .controls').html());

의

$('.add_title_option').after($('.selectContainer select').clone().show());

Insted를 사용해야하고, 보여 없음에서 디스플레이를 설정합니다. 그러면 선택 상자를 .selectBoxIt()

으로 변환해야합니다.이 플러그인으로 사용자 정의하려면. 또한 선택 상자에서 ID를 제거하여 ID를 분리 할 수 없도록했습니다. 코드는 다음과 같습니다.

<!DOCTYPE HTML> 
<html> 
<head> 
<link type="text/css" rel="stylesheet" href="http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectBoxIt.css" /> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
<script src="http://gregfranko.com/jquery.selectBoxIt.js/js/jquery.selectBoxIt.min.js"></script> 

<script> 
$(function() { 

    $(".titleSelect").selectBoxIt(); 

    $('body').on('click', '#dublicateButton', function() { 
     $('.add_title_option').after($('.selectContainer select').clone().show().selectBoxIt()); 

    }); 
}); 
</script> 
</head> 
<body> 

<div class="add_title_option"> 
    <div class="control-group"> 
     <label class="control-label" for="title">Title</label> 
     <div class="controls"> 
      <div class="selectContainer" > 
       <select class="titleSelect" name="title"> 
        <option></option> 
        <option value="1">Option #1</option> 
        <option value="2">Option #2</option> 
        <option value="3">Option #3</option> 
        <option value="4">Option #4</option> 
       </select> 
      </div> 
      <a href="javascript:void(null);" id="dublicateButton" class="add_option add_title"> 
       click 
      </a> 
     </div> 
     <div class="error" id="title_error"></div> 
    </div> 
</div> 

</body> 
</html>

출처

2013-10-09 14:01:26

SelectBoxIt - 여러 페이지에서 선택 (동적)

답변

관련 문제