html下拉框通过js如何选中区分颜色？

下拉列表框中有三个圆圈，分别是三个颜色，我怎么点击这个圈圈显示这个颜色，我做的下拉框里面会区分颜色但是选中之后就默认为黑色了求解

<select id="delivery" name="delivery" class="select" style="width: 40px">
    <option selected="selected" value="0"/>"  style=" color: green;">●</option>
     <option value="1"/>" style="font-color: yellow;">●</option>
     <option value="2"/>" style=" color: red;">●</option>
</select>

下拉框中有三种颜色，我要的结果的选中哪一个圈圈就显示哪一中颜色。。

2个评论

5个牛币 html 下拉框选中区分颜色

所有回答列表(4)

lmmmd 2014年11月12日

首先，把第二个option的font-color改为color。

要实现你想要的效果，可以利用select的onchange事件，你选中个option时触发该事件，然后将选中的那个option的颜色取出，把select也设置为该颜色。

下面使用jquery实现，供参考：

$("#delivery").change(function() {
var selectedColor = $(this).children("option:selected").css("color"); // 取出所选中的option的颜色
$(this).css("color", selectedColor); // 将上述颜色赋给select
});

评论(0) 最佳答案

后知后觉 LV14 2014年11月11日

当然啊，你这个text的值本身就是黑色的，只不过因为外在样式才呈现出不同的样式。

这个用select好像不太好，你可以换成redio或者颜色选择器。如果非要用下拉框，试试用html5或者自己用div模拟。

mj19910923 LV14 2014年11月12日

使用jquery 选择器

xxw1028 LV12 2014年11月12日

解决方案：

当option被选中的时候，需要将对应的样式也领出来，付给select

最热评论
最新问答