i have a dropdown, that should sent it's data(the selected option) to backend (by laravel). i use "SELECTRIC' JQuery library for styling this dropdown.
my problem:
behavior of SELECTRIC JQuery library, for styling my dropdown:
- it hides original dropdown,
- creates new element that consist of
<ul>tag and<li>tags. - replace the
<select>tag by newly created<ul>tag , and also replaces<option>tags by newly created<li>tags. - now, shows new dropdown element (by desired style) but consisted of
<ul>and<li>tags instead of<select>and<option>tags. - result: the back end, can not read (receive) selected option (
because in fact, this selected option, is
<li>tag and is not<option>tag ).
my question is that: how receive dropdown data, in state that , i use of selectric library(or any other approach by similar behavior).
the jquery library of selectric codes are not here, because i think that these codes, do not have effect in this specific behavior of styling dropdown element.
my code:
<label>your shop:<i> *</i></label>
<select wire:model="type" >
<option>select please...</option>
<option value="real">personal</option>
<option value="legal">public</option>
</select>
and part that have JQuery of selectric codes:
window.addEventListener("DOMContentLoaded", function(){
$('select').selectric({
forceRenderBelow: true
}); });
(function($) {
'use strict';
jQuery(document).ready(function($) {
$('select').selectric({
forceRenderBelow: true
}); });
})(jQuery);
the image of this drop down:
it is a picture of Browser inspection ,that shows, how the selectric JQuery library, replaces <ul> and <li> tags instead of <select> and <option> tags.
the codes inside green rectangle, are the codes that are in codes.
the codes inside red rectangle are the codes that, selectric JQuery library, crated here and replaced. the user, selects these, but back end can't read(receive) these.
