Tour Avril Tour Avril - 5 months ago 45
jQuery Question

Create more Select2 but it a normal select

I'm not good at English. sorry please help me.



$(document).ready(function() {
$(".js-example-basic-single").select2();
});

jQuery(document).ready(function($){
$('.my-form .add-box').click(function(){
var n = $('.text-box').length + 1;
if( 5 < n ) {
alert('Stop it!');
return false;
}
var box_html = $('<p class="text-box"><label for="box' + n + '">Box <span class="box-number">' + n + '</span></label> <select class="js-example-basic-single" style="width: 200px" name="boxes[]" id="box' + n + '"><option value="a">a</option><option value="b">b</option></select> <a href="#" class="remove-box">Remove</a></p>').select2();
box_html.select2("destroy");
box_html.hide();
$('.my-form p.text-box:last').after(box_html);
box_html.fadeIn('slow');
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="my-form">
<form role="form" method="post">
<p class="text-box">
<label for="box1">Box <span class="box-number">1</span></label>

<!-- <input type="text" name="boxes[]" value="" id="box1" /> -->
<select name="boxes[]" id="box1" class="js-example-basic-single" style="width: 200px">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<a class="add-box" href="#">Add More</a>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>





I want to do form for receiving data input form user that data can have more than 1 data so I make a
#addmore
for add select and #remove for remove select when user want to remove some select.

When add more select it's a normal select but I need select2-jquery I'm already use
class="js-example-basic-single"
to make it into select2-jquery but still normal select.

Thank you very much

Answer

Ok sorry if this isn't what you wanted to do -- but I assumed you wanted to click the add more button and append more select boxes.

Select2 is built for use with jQuery. You need to load jQuery first. Second, it didn't make sense to me why you would remove the other select box, so I just removed that portion. Finally you need to run select2() after the element is appended to the DOM.

Hope this helps! Happy coding :)

$(document).ready(function() {
$(".js-example-basic-single").select2();
});


jQuery(document).ready(function($){
    $('.my-form .add-box').click(function(){
        var n = $('.text-box').length + 1;
        if( 5 < n ) {
            alert('Stop it!');
            return false;
        }
        var box_html = $('<p class="text-box"><label for="box' + n + '">Box <span class="box-number">' + n + '</span></label> <select class="js-example-basic-single" style="width: 200px" name="boxes[]" id="box' + n + '"><option value="a">a</option><option value="b">b</option></select> <a href="#" class="remove-box">Remove</a></p>');		
        $('.my-form p.text-box:last').after(box_html);
        box_html.fadeIn('slow', function(){
          $('.js-example-basic-single', this).select2();  
        });
    });
    $('.my-form').on('click', '.remove-box', function(){
        $(this).parent().css( 'background-color', '#FF6C6C' );
        $(this).parent().fadeOut("slow", function() {
            $(this).remove();
            $('.box-number').each(function(index){
                $(this).text( index + 1 );
            });
        });
        return false;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.min.css" rel="stylesheet"/>

<div class="my-form">
        <form role="form" method="post">
            <p class="text-box">
                <label for="box1">Box <span class="box-number">1</span></label>
                
                <!-- <input type="text" name="boxes[]" value="" id="box1" /> -->
                	<select name="boxes[]" id="box1" class="js-example-basic-single" style="width: 200px">
                        <option value="a">a</option>
                        <option value="b">b</option>
                        <option value="c">c</option>
            		</select>
                <a class="add-box" href="#">Add More</a>
            </p>
            <p><input type="submit" value="Submit" /></p>
        </form>
    </div>

Comments