Here is the aspect i want to make, each box represent each option

<label for="product">Choose:</label>

    <select name="product" id="product">
      <option value="70A">Volvo</option>
      <option value="70B">Saab</option>
      <option value="70C">Mercedes</option>
      <option value="75A">Audi</option>
    </select>

Is it possible to do that?

CodePudding user response：

You need to make divs with each() from all your select options.

Then you get the click on them and change the value of your hidden select.

customSelect("selectOne", "customSelectOne");
customSelect("selectTwo", "customSelectTwo");

$(document).on("click",".selectOption", function (event) {
  $(this).parent("div:first").find('.selectOption').removeClass('checked');

  const getOptionID = $(this).data('optionid');
  $(this).toggleClass('checked');
  $(this).parent("div:first").prevAll('select:first').val(getOptionID).change();
});

$('.hideShowSelect').click(function() {
  $('select').toggle();
});

function customSelect(select, div) {
  $('select[name="'   select   '"] option').each(function(index) {
    const checkFirstOption = (index === 0 ? ' checked' : '');
    const optionVal = $(this).val();
    
    $('.'   div).append('<div  data-optionid="'   optionVal   '">'   optionVal   '</div>');
  });
}

#myform {
  max-width:450px;
  margin-top:25px;
}

#myform select {
  display:none;
}

#myform .selectOption {
  color:#141414;
  cursor:pointer;
  display: inline-block;
  border: 1px solid #bebebe;
  padding:15px 17.5px;
  border-radius:2.5px;
  margin:5px;
}

#myform .selectOption.checked {
  border: 1px solid #111;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
  <select name="selectOne">
    <option value="70A">70A</option>
    <option value="70B">70B</option>
    <option value="70C">70C</option>
    <option value="75A">75A</option>
    <option value="75B">75B</option>
    <option value="75C">75C</option>
  </select>
  <div ></div>
  
  <select name="selectTwo">
    <option value="80B">80B</option>
    <option value="80C">80C</option>
    <option value="80D">80D</option>
    <option value="85B">85B</option>
    <option value="85C">85C</option>
    <option value="85D">85D</option>
  </select> 
  <div ></div>
</form>

<p><a href="#" >Hide / show select</a></p>