Select下拉框

 一、select使用Demo

1、demo总结：

<style>
    .red {
        color:red;
    }
    .black {
        color: black;
    }
</style>
<select id="s" on="dd(this)" class = 'red'onchange="Change(this)">
</select>

<script>
        $(function () {
            $('#s').html(tmp);
        })
      
        //1、注意如果option上已经添加了样式，此处为class样式，那么给select添加样式的时候，不会再给option添加样式；
        // 2、如果option原来没有添加样式，此处无class样式，那么给select红色字体，option也会变为红色字体
        var tmp = "<option value='-1' >无</option>\
                   <option value = '8426' class='black' > TEST - F77 VCB - U</option >\
                <option value='8395' class='red'>SIU NANG-F01 VCB-手</option>\
                <option value='8396'  class='black'>SIU NANG-F02 TCB-手</option>\
                <option value='8397'  class='black'>SIU NANG-F03 ACB-U</option>\
                <option value='8398'  class='red'>SIU NANG-F04 DAB-手</option>\
                <option value='9442'class='black'>SUNG PING-VIB-短信費</option>";

        function Change(obj) {
            var c = $(obj).find('option:selected').attr('class');   //得到选中的option的color
            $(obj).removeClass().addClass(c);  //给select添加颜色

            //3、如果默认进来有的option给了样式，有的没给需要用js控制
            $(obj).find('option:not(:selected):not(.red)').addClass('black')  //给不是红色的option添加黑色color
        }
    </script>

View Code

效果图：选中红色时上面显示红色，选择黑色时上面显示黑色