Manik Manik - 7 months ago 36
HTML Question

Convert dropdown to selection boxes with color and trigger drop down action

Please help to convert this drop down to selection box with color like white box, black box etc [not check box] .

enter image description here

So that page is loading , instead of showing drop down I need to show color selection boxes, please help.

I tried some code but it is only partially working .



<table class="variations" cellspacing="0">
<tbody>
<tr>
<td class="label">
<label for="pa_available-colors">Available Colors</label>
</td>
<td class="value">
<select id="pa_available-colors" class="" name="attribute_pa_available-colors" data-attribute_name="attribute_pa_available-colors">
<option value="" selected="selected">Choose an option</option>
<option value="black" class="attached enabled" selected="selected">Black</option>
<option value="white" class="attached enabled" selected="selected">White</option>
<option value="red" class="attached enabled" selected="selected">Red</option>
</select>
</td>
</tr>
</tbody>
</table>





Please help .Please see the following picture , I need to convert drop down to this type of boxes
enter image description here

Answer

i think this code will help you that you want to do

Html

<table class="variations" cellspacing="0">
  <tbody>
    <tr>
      <td class="label">
        <label for="pa_available-colors">Available Colors : </label>
      </td>
      <td class="value">
        <select id="pa_available-colors" class="" name="attribute_pa_available-colors" data-attribute_name="attribute_pa_available-colors">
          <option value="black" class="attached enabled" selected="selected">Black</option>
          <option value="white" class="attached enabled" selected="selected">White</option>
          <option value="red" class="attached enabled" selected="selected">Red</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>

CSS

.selectbox>span {
  padding: 10px;
  border: 2px solid #fff;
  display: inline-block;
  vertical-align: middle;
}

.selectbox {
  border: 1px solid #dddddd;
  display: inline-block;
  cursor: pointer;
}

.selectbox.active {
  border: 1px solid #333;
}

JQuery

$("#pa_available-colors option").each(function() {
  //get values of all option
  var val = $(this).val();

  //hide select box 
  //$(this).parent("#pa_available-colors").hide();

  //remove other select options
  var selected = $(this).not(":selected").remove();

  //do magic create boxes like checkbox
  $("td.value").append('<div class="selectbox" data-color="' + val + '"><span style="background-color:' + val + '"></span></div>');

});
$(".selectbox").click(function() {
  //remove selected from others
  $(".selectbox").removeClass("active");
  //do active to selected
  $(this).addClass("active");
  //get value
  var optVal = $(this).data("color");

  //change value
  $("#pa_available-colors option").val(optVal);
  //change text
  $("#pa_available-colors option").text(optVal);
})

here is fiddle

Comments