Is it possible to style a (must be dropdown list/select option, not checkbox/radio button) options to box/div?

Question

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

Choose:

Is it possible to do that?

SKJ · Answer

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.

Edit : i commented my code.

// lets make divs options for the select
customSelect("selectOne", "customSelectOne", 1);
customSelect("selectTwo", "customSelectTwo", 0);

// get the click for each options created
$(document).on("click",".selectOption", function (event) {
  // first, we remove class for each option div
  $(this).parent("div:first").find('.selectOption').removeClass('checked');

  const getOptionID = $(this).data('optionid'); // get value of data optionid
  $(this).toggleClass('checked'); // add/remove checked class
   // change value of hiddent select
  $(this).parent("div:first").prevAll('select:first').val(getOptionID).change();
});

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

/*
  loop that make reproduce options of your select
  @select : selector of the select
  @div : selector of the div that will contain the divs for each option
  @checked : 1 to make first div checked or 0 to not
*/
function customSelect(select, div, checked) {
  // we loop each option
  $('select[name="' + select + '"] option').each(function(index) {
    // check if need to add checked class if index is equal to 0 and checked equal to 1
    const checkFirstOption = (index === 0 && checked === 1 ? ' checked' : '');
    const optionVal = $(this).val(); // get option value
    
    // create a div for the option with data value with option value
    $('.' + div).append('' + optionVal + '');
  });
}

#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;
  transition: all 0.3s ease-out;
}

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



  
  
  
   
  


Hide / show select

Is it possible to style a (must be dropdown list/select option, not checkbox/radio button) options to box/div?

1 Answers