将下拉菜单转换为带颜色和触发下拉操作的选择框 [英] 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] .

这样页面正在加载，而不是显示下拉框，我需要显示颜色选择框，请帮助。

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>

请看下面的图片，我需要转换下拉到这种类型的盒子
< img src =https://i.stack.imgur.com/VYnsP.jpgalt =enter image description here>

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

推荐答案

我认为这段代码可以帮助你，你想做的

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="" selected="selected">Choose an option</option>
          <option value="black" class="attached enabled">Black</option>
          <option value="white" class="attached enabled">White</option>
          <option value="red" class="attached enabled">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();

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

});
//remove empty selectbox
$('.selectbox[data-color=""]').remove();

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

  $("#pa_available-colors").val(optVal) 

});

//change select box on dropdown change
$("#pa_available-colors").change(function(){
    var optVal = $(this).val();
  $(".selectbox").removeClass("active");
  $(".selectbox[data-color='"+optVal+"']").addClass("active");
})

这里是小提示

这篇关于将下拉菜单转换为带颜色和触发下拉操作的选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！