JSFiddle - React, Tailwind, and code Playground

by Tushar Jadhav

HTML

<div class="search-form search_inventory_box row  styled_input">
    <form method="get" action="#">
        <input type='hidden' name='page_id' value=''>
        <div class="col-md-6 clearfix">
            <div class="my-dropdown make-dropdown make-dropdown">
                <select name='make' class='css-dropdowns' data-sort='make' data-prefix='' data-label-singular='Make' data-label-plural='Makes' data-no-options='No options'>
                    <option value=''>Make</option>
                    <option value='Nissan' data-key='nissan'>Nissan</option>
                    <option value='Porsche' data-key='porsche'>Porsche</option>
                </select>
            </div>
            <div class="my-dropdown model-dropdown make-dropdown">
                <select name='model' class='css-dropdowns' data-sort='model' data-prefix='' data-label-singular='Model' data-label-plural='Models' data-no-options='No options'>
                    <option value=''>Model</option>
                    <option value='Boxster' data-key='boxster'>Boxster</option>
                    <option value='Carrera' data-key='carrera'>Carrera</option>
                    <option value='Cayenne' data-key='cayenne'>Cayenne</option>
                    <option value='GTR' data-key='gtr'>GTR</option>
                    <option value='GTS' data-key='gts'>GTS</option>
                </select>
            </div>
            <div class="my-dropdown transmission-dropdown make-dropdown">
                <select name='transmission' class='css-dropdowns' data-sort='transmission' data-prefix='' data-label-singular='Transmission' data-label-plural='Transmissions' data-no-options='No options'>
                    <option value=''>Transmission</option>
                    <option value='5-Speed Automatic' data-key='5-speed-automatic'>5-Speed Automatic</option>
                    <option value='5-Speed Manual' data-key='5-speed-manual'>5-Speed Manual</option>
                    <option value='6-Speed...

JavaScript

$('.css-dropdowns').attr('required', 'required');
$('.search_inventory_box form').submit(function (e) {
    console.log('fwef');

    //document.querySelectorAll('.css-dropdowns').required = true;

    $('.search_inventory_box form select[value=""]').attr('name', '');

    $(this).find("select option:selected").each(function (index, element) {
        $(this).val($(this).data('key'));
    });
});