hello. im trying to get multi select dropdown on my site, i tried 2 plugin but only one worked and the one that worked doesnt work on mobile and would like some help/suggestions
i have website where user can enter multiple item categories through drop down. this drop down is very janky on mobile, so i looked for different one
this is the one with janky dropdown on mobile. it keeps opening and closing rapidly, and needs user to kinda hold down to keep it open. It’s just bad UX in general but the functionality actually works.
https://dev1.bsghandcraft.com/newstore.php
its using this plugin i believe. i tried searching for similar issue like mine with this plugin but havent found any
this si the piece of code for the plugin
<div class="form-item" id="edit-products-wrapper">
<!-- Initialize the plugin: -->
<script type="text/javascript">
$(document).ready(function() {
$('#cat-selector').multiselect();
});
</script>
</div>
<label>Please select the products your store offers: <span class='required'>*</span></label>
<select name="cat_id" class="form-select" id="cat_id" multiple="multiple">
<?php if(!empty($cats)): ?>
<?php foreach($cats as $k=>$v): ?>
<option value="<?php echo $v['id']; ?>"><?php echo $v['cat_name']; ?></option>
<?php endforeach; ?>
<?php endif; ?>
</select>
so i decided to try different plugin and came across select2
https://select2.org/
this one works great on both desktop and mobile and very simple to install except the database isn’t displaying product categories that user have chosen. i made 2nd instance of the program with that plugin in this url
https://dev1.bsghandcraft.com/basestorefinder/superstorefinder_responsive/newstore.php
i call the plugin source up top with
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
and then make the dropdown like so
<div class="form-item" id="edit-products-wrapper">
<!-- Initialize the plugin: -->
<script type="text/javascript">
$(document).ready(function() {
$('.cat-selector2').select2();
});
</script>
</div>
<label>Please select the products your store offers: <span class='required'>*</span></label>
<select name="products" class="cat-selector2" multiple="multiple">
<?php if(!empty($cats)): ?>
<?php foreach($cats as $k=>$v): ?>
<option value="<?php echo $v['id']; ?>"><?php echo $v['cat_name']; ?></option>
<?php endforeach; ?>
<?php endif; ?>
</select>
Is there something wrong i did with implementation for the select2 plugin? any other recommendations for multiselect dropdown plugin?
please try it out and maybe see what i did wrong. ill be on the backend approving stores so you guys can see the result in the front end if youd like