In a laravel blade page I have a controller sending planTypes
and stored like this:
arr = [];
var planTypes = @json($planTypes);
$('#multiselect').change(function (e) {
var plan_id = $(this).val();
arr.push(plan_id);
});
What it does? For any change in a dropdown listing all planTypes I capture the unique id and store it in a js array (arr
)
The user has the possibility to add multiple planTypes in the same page without the need to refresh and that is why the change
js function
Whenever I render the new dropdown, I would like to only display the remaining unused planTypes and I try to do it like this:
var item=
' <select id="multiselect" name="planTypes[0][]" >'
' <option value="">--</option>'
@foreach($planTypes as $planType)
if(!arr[{{ $planType->id }}]) {
' <option value="{{ $planType->id }}">{{ $planType->name }}</option>'
}
@endforeach
But for some strange reasons, I cannot make it work like that, combining blade @foreach and javascript if
Could someone point me to the correct approach?
Thank you! ' '
CodePudding user response:
Try something like this:
<script>
const planTypes = {!! json_encode($planTypes) !!};
// use this HTML however you want
let html = `
<select id="multiselect" name="planTypes[0][]" >'
<option value="">--</option>
${planTypes.map(planType => `<option value="${planType.id}">${planType.name}</option>`)}
</select>
`;
CodePudding user response:
<script>
var planTypes = {!! json_encode($planTypes) !!};
var filter_planTypes = planTypes;
$(document).on('change', '#multiselect', function () {
var plan_id = $(this).val();
filter_planTypes = filter_planTypes.filter(function(val) {
return val.id != plan_id;
});
var options = '<option value="">Select</option>';
$.each(filter_planTypes, function (key, value) {
options = '<option value="' value.id '">' value.name '</option>';
});
$('#multiselect').html(options);
$('#multiselect').trigger("change");
});
</script>
OR if you want to use multiselect the better option is to user select2 js library
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<select id="multiselect" name="planTypes[]" multiple="multiple">
<option value="">--</option>
@foreach($planTypes as $planType)
<option value="{{ $planType->id }}">{{ $planType->name }}</option>
@endforeach
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
// Select2 Multiple
$('#multiselect').select2({
placeholder: "Select",
allowClear: true
});
});
</script>