Javascript 使用颜色和触发器下拉操作将下拉列表转换为选择框

请帮助将此下拉列表转换为具有白框、黑框等颜色的选择框[非复选框]

因此，该页面正在加载，而不是显示下拉列表，我需要显示颜色选择框，请帮助

我尝试了一些代码，但它只是部分工作

可用颜色 选择一个选项 黑色 白色 红色 使用下拉列表： 答案很简单：你不能

让我解释一下原因。这个问题的答案也非常非常简单：。你可以看到这一段：

除了背景色和颜色外，通过选项元素的样式对象应用的样式设置将被忽略。此外，直接应用于各个选项的样式设置将覆盖应用于包含整个选择元素的样式设置

当然，你可以把你的下拉列表转换成它甚至在链接的问题中。。。别那么懒，但它还是下拉列表吗？有关使用无线电元件等的更多信息，请参见答案的下一部分

使用其他东西： 作为一种解决方法，您可以尝试使用，例如，无线电元素：

/*一般的东西-单选按钮*/ 输入[类型=收音机]{ 位置：相对位置； 宽度：22px； 高度：22px； 垂直对齐：底部对齐； } 输入[类型=收音机]：选中：之前{ 边框：1px实心111； } /*背景-带灰色边框的白色背景*/ 输入[类型=收音机]：在{ 位置：绝对位置； 顶部：-2px； 左：-2px； 内容：； 显示：块； 宽度：22px； 高度：22px； 边框：1px实心999； 边界半径：3px； 背景色：fff； } /*前景色方块*/ 输入[类型=收音机]：之后{ 位置：绝对位置； 顶部：1px； 左：1px； 内容：； 显示：块； 宽度：18px； 高度：18px； 边界半径：2px； 盒影：插入1px 1px 3px 1px rgba0,0,0.12； } /*颜色*/ 输入[类型=无线电][值=红色]：之后{ 背景：c44； } 输入[类型=收音机][值=绿色]：之后{ 背景：4c4； } 输入[类型=收音机][值=蓝色]：之后{ 背景：44c； } 颜色： 以下是CSS：

选择选项[值=黑色]{ 颜色：fff； 背景：黑色； } 选择选项[value=white]{ 颜色：000； 背景：白色； } 选择选项[值=红色]{ 颜色：fff； 背景：红色； } 可用颜色 选择一个选项 黑色 白色 红色 更新

使用你的HTML

看

原创的

您可以使用一些JavaScript将select转换为收音机。然后使用一些CSS来处理结果HTML的表示

从中得到转化

<div class="value">
  <select id="pa_available-colors" class="" name="attribute_pa_available-colors" data-attribute_name="attribute_pa_available-colors">
    <option value="">Choose an option</option>
    <option value="black" class="attached enabled" selected="selected">Black</option>
    <option value="white" class="attached enabled">White</option>
    <option value="red" class="attached enabled">Red</option>
  </select>
</div>

对此,

<div class="value">
  <input type="radio" name="attribute_pa_available-colors" value="">
  <label for="attribute_pa_available-colors">Choose an option</label>

  <input type="radio" name="attribute_pa_available-colors" value="black" checked="checked">
  <label for="attribute_pa_available-colors">Black</label>

  <input type="radio" name="attribute_pa_available-colors" value="white">
  <label for="attribute_pa_available-colors">White</label>

  <input type="radio" name="attribute_pa_available-colors" value="red">
  <label for="attribute_pa_available-colors">Red</label>
</div>

请参见此处

使用HTML5输入，type=color，示例如下：

在选项列表中，您可以指定要查看的颜色列表

可用颜色 ff0000 0000ff 00ff00 ffff00 00ffff

---

我认为这段代码将帮助您完成您想做的事情

Html

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");
})

---

这里是

你的意思是你想要一个带有colorlike@Pugaz Friend的选择框，真的非常感谢你的努力。现在请看我的问题。另外，你能根据我的html代码写代码吗？改用收音机怎么样？我想把下拉列表改成像收音机一样的盒子，但要有颜色。请在谷歌中使用我给定的htmlSearch单选按钮设计，然后根据结果编辑你的单选按钮。我想将下拉列表更改为类似radio的框，但带有颜色。请使用我的给定HTML和您的给定HTML，您选择了所有3个选项-这是故意的吗？考虑到你希望你的选择像收音机一样，这似乎是不对的。除非你试图转换已经存在的HTML。好吧，这是我在最新的提琴中提供的，除非我遗漏了什么？是否要我更新样式以反映示例中的codecany？是的。你能帮我做一下吗。请看更新的样式。我想把下拉框改成收音机之类的，但要有颜色。请使用我给定的HTMLY，这是我真正想要的。但是在fiddle中，你错过了这个选择。请告诉我在代码中发生了什么？实际上，我的代码代表这个选择框的选择。如果你添加上面的选项，你会看到空白选择。在这种情况下，你需要过滤空白值或者仅仅移除它，这里是你需要的解决方案，移除空的复选框。

.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;
}

$("#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");
})