Level 10
Hi @abdulbazith, what is select2()? Some jQuery plugin?
Jul 30, 2019
11
Level 5
Search box in multiple select (array of select box) not working
Guys i have a select box which loads all the supplier name from db.
<select id="sup_name" name="sup_name" data-placeholder="Choose One"
class="form-control" required>
<option value=""> Select the Supplier</option>
@foreach($suppliers as $supplier)
<option value='{{ $supplier->id }}'>{{$supplier->sup_name }}</option>
@endforeach
</select>
for having a search box in select what i did is
<script>
$(function () {
$("select").select2();
});
</script>
//or the below code
<script>
$("#sup_name").select2( {
allowClear: true
} );
</script>
In both the code any one of the code is working fine.
but my problem is i have a select box with array like below
<select id="product_name" class=" form-control product_name" name="product_name[]" data-placeholder="Choose One"
required>
<option value="">Select Product Name</option>
@foreach($products as $product)
<option value='{{ $product->id }}'>
{{$product->product_name }}</option>
@endforeach
</select>
this is a array select box. i have a add button to add more select boxes so only i kept it as array.
the search option for select is not working in this array of select box.
for the first select box for product its working. when i click the add button and new select box rose means the search option is not working.
whats the problem
Level 5
@michapietsch yes. its a plugin only
Level 10
@abdulbazith I suspect the search option comes from the jQuery plugin? Then I suspect the plugin can not handle multiple selects like this. Please remove the first select, which works, and check if the second one works after removing the first.
Level 5
@michapietsch thank you for your response.
acctually i mention 'or'
just iam using any one code only it works fine when page load but after that its not working
Level 10
@abdulbazith So it loads only one time after page load and then stops working, not matter which of the selects?
Level 5
@michapietsch yes yes.
is there any solution for this??
because i have a add button, so that when i click it a new drop down roses, then the search for select should work for that too.
name of the drop down is in array name="product_name[]"
what should i doo
Level 122
Your question is confusing. Particularly this
this is a array select box. i have a add button to add more select boxes so only i kept it as array.
So you want to add more select boxes? You mean more dropdown lists, or add more items to the list, or just you want to select multiple items?
If you are adding more dropdowns then;
If you just want to select multiple items in the select list then just add multiple to the select element
<select id="product_name" class="form-control product_name" name="product_name[]" data-placeholder="Choose One" required multiple>
Please try to avoid adding loads of stuff to the question that is not relevant. The first part of your question is not relevant.
Level 5
@snapey thank you for your response and very sorry that i have confused the question i think so.
actually. what i expect is
Refer: https://imgur.com/RAIK8uI
In the above image the supplier name is a drop down and has a search functionality.
my supplier dropdown id is id="sup_name".
this is my blade coding for supplier_name
<select id="sup_name" name="sup_name" data-placeholder="Choose One"
class="form-control" required>
in my javascript i wrote
<script type="text/javascript">
$("#sup_name").chosen();
</script>
this works fine. but the same thing i need to follow in another dropdown but it is array.
i have a add button so that when i click that new drop drown roses like below image
Refer: https://imgur.com/MjM7qoz
in the above image i click the add button next row rises. like that goes on.
but here the search functionality for the drop down not works. it works for the first row only.
why?
my blade coding is
<select id="product_name" class=" form-control product_name"
name="product_name[]" data-placeholder="Choose One" required>
i know that i id is repeated when new rows added. and the problem is the chosen.() works only when the page loads.
i tried using the chosen(); function in the button add after adding the chosen must call. but no use it not worked.
what i expect is i need the search functionality with dropdown in array also.
what to do???
Level 5
If possible Kindly reply please for this, and sorry for tagging you
Level 53
@abdulbazith sorry mate, I was out of the country for a few months, work vacation and such....
You have to destroy the select2 instance before you copy the element, and after copying, you run select2 again.
Here is a small working proof of concept:
<div class="field">
<div class="">
<label>Products</label>
</div>
<div class="field-body">
<div class="field">
<div class="control selects">
<i class="fa fa-plus add"></i>
<select class="form-control product_name" name="product_name[]" data-placeholder="Choose One" required>
<option value="">Select Product Name</option>
@foreach(range(1,10) as $num)
<option value='{{ $num }}'>{{ $num }}</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
<script>
$(".product_name").select2( {
allowClear: true
} );
$('.add').click(function() {
$("select.product_name").eq(0).select2('destroy').clone().appendTo( $('.selects') );
$("select.product_name").select2({allowClear: true});
})
</script>
This is working for me, when clicking the 'add' button, it will:
- destroy the select2 instance (the selected value will be saved)
- copy the first selectbox and add the copy to the parent container
- reinitialise the select2 plugin on all selectboxes.
Good luck ;)
Level 5
@lostdreamer_nl thank you thank you sooo much.
liked your reason for vacation. think had a good vacation.
ok let me try the code and intimate you ..
Please or to participate in this conversation.