Safari 中无法对 Html option 添加样式。

当然是可以更改的，但前提是必须放在select外标签上，option 是内部属性，是不能直接修改的，把<option style="color:red">volo</option>换成下面的代码即可：

<select id="optionid" style="color:blue">

<option value="1">volo</option>

<option value="2">baidu</option>

</select>

<script type="text/javascript">

document.getElementsById("optionid").style.color="red"

</script>

html multi select控件提交form：

一、multiselect 是一个开源插件，官网地址https://github.com/ehynds/jquery-ui-multiselect-widget， 相关文档地址http://www.erichynds.com/blog/jquery-ui-multiselect-widget（打不开） ，看了下代码的提交时间，2年到5年前提交的，最近无更新。项目中有用到下拉选择框多选的情况，就研究了下使用方法，detail is below:

二、首先下载https://github.com/ehynds/jquery-ui-multiselect-widget/archive/master.zip 解决后放到项目里，主要引用到的js和css有：

<script type="text/javascript" th:src="@{/static/js/core/jquery-ui-multiselect-widget-master/src/jquery.js}"></script>

<script type="text/javascript" th:src="@{/static/js/core/jquery-ui-multiselect-widget-master/src/jquery-ui.js}"></script>

<script type="text/javascript" th:src="@{/static/js/core/jquery-ui-multiselect-widget-master/src/jquery.multiselect.js}"></script>

<link rel="stylesheet" type="text/css" th:href="@{/static/js/core/jquery-ui-multiselect-widget-master/jquery.multiselect.css}" />

<link rel="stylesheet" type="text/css" th:href="@{/static/js/core/jquery-ui-multiselect-widget-master/src/jquery-ui.css}" />

下载下来的压缩包里提借的示例 引用的 jquery-ui是google的公共库，国内调不了，所以打开很慢直到超时，自己另外下个jquery-ui改成引用本地的。

用法很简单：

$("#RECEIVE_GOODS").multiselect(

{

close: function(){//获取选中的值，在下拉框关闭时触发的

var value = $("#RECEIVE_GOODS").multiselect("getChecked").map(function(){

return this.value

}).get()

$("#RECEIVE_GOODS").val(value)

},

open: function(){//打开 选中初始化，不是很完美，是在点下后处理的，不能在初始化是显示选中的条数

var vv = document.getElementById("RECEIVE_GOODS").attributes[0].nodeValue//$("#RECEIVE_GOODS").val()

var chks = $("#RECEIVE_GOODS").multiselect("getChecks")

if(null != chks &&undefined != chks &&chks.length >0){

for(var i = 0i <chks.lengthi++){

var ck = chks[i]

if(null != vv &&　undefined != vv &&"" != vv){

var vvs = vv.split(",")

for(var j = 0j <vvs.lengthj++){

if($.trim(ck.value) == $.trim(vvs[j])){

ck.checked = true

}

}

}

}

}

}

}

三、其它支持的一些相关事件和回调方法

Parameter

Description

Default

showHeaderA boolean value denoting whether or not to display the header containing the check all, uncheck all, and close links.true

maxHeightThe maximum height in pixels of the scrolling container that holds the checkboxes.175

minWidthThe minimum width in pixels of widget. Setting to auto (default) will inherit the width from the original select element.200

checkAllTextThe default text of the “Check all” link.Check all

unCheckAllTextThe default text of the “Uncheck all” link.Uncheck all

noneSelectedText

Renamed from noneSelected in 0.5!

The default text the select box when no options have been selected.

Select options

selectedListA boolean/numeric value denoting whether or not to display the checked opens in a list, and how many. A number greater than 0 denotes the maximum number of list items to display before switching over to the selectedText parameter. A value of 0 or false is disabled.false

selectedTextThe text to display in the select box when options are selected (if selectedList is false). The pound sign (#) is automatically replaced by the number of checkboxes selected. If two pound signs are present in this parameter, the second will be replaced by the total number of checkboxes available. Example: “# of # checked”.

New in 0.5!

As of 0.5, this parameter can also accept an anonymous function with three arguments: the number of checkboxes checked, the total number of checkboxes, and an array of the checked checkbox DOM elements. See the examples.

# selected

positionThe position of the options menu relative to the input control: top, middle, or bottom.bottom

shadowA boolean value denoting whether to apply a css shadow (class ui-multiselect-shadow).false

fadeSpeedHow fast (in ms) to fade out the options menu on close.200

state

New in 0.5!

The default state of the widget. Either open or closed.

closed

disabled

New in 0.5!

Whether or not to disabled the widget by default. Important: see the “Known Issues” section below for more documentation on this.

false

onCheckA callback to fire when a checkbox is checked.Function

onOpenA callback to fire when the options menu is opened.Function

onCheckAllA callback to fire when the “Check all” link is clicked.Function

onUncheckAllA callback to fire when the “Uncheck all” link is clicked.Function

onOptgroupToggleA callback to fire when the opgroup header is clicked. An array of checkboxes inside the optgroup is passed as an optional argument.

---