Javascript 在jquery中迭代多个下拉列表

嗨，我有一个for循环，它迭代并设置多个下拉列表。我想遍历每个下拉列表并将背景色设置为onload。出于某种原因，只有第一个列表填充颜色，而且也只有在Chrome中填充颜色。 这是小提琴的代码。剩下的我怎么办 要填充颜色的列表。谢谢

HTML代码

<div class="s_exch_status_outer">
    <div class="s_exch_status_inner">
         <h1 class="s_exch_status_heading">Status</h1>

        <div class="s_exch_status_fields" id="bg">
            <div class="s_formrow">
                <label class="lightLabel" for="endpointColorStatus.endpointColorStatusId">Separation Information</label>
                <select id="endpointColorStatusId" name="endpointStatusDtos[0].endpointColorStatus.endpointColorStatusId" class="s_medium" onclick="changeFontColor(this.options[this.selectedIndex].style.backgroundColor)" onfocus="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor ;" onchange="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor">
                    <option value="-1">Select One</option>
                    <option style="background-color: #00FFFF;" value="2">Actively Testing</option>
                    <option style="background-color: #9ACD32;" value="1">Implemented</option>
                    <option style="background-color: #FF0000;" value="4" selected="selected">Issues</option>
                    <option style="background-color: #DB7093;" value="5">Other Requirements not in place</option>
                    <option style="background-color: #FFA500;" value="3">State In Development</option>
                    <option style="background-color: #2F4F4F;" value="6">States Not Implementing SIDES</option>
                </select>
                <script type="text/javascript">
                    Spring.addDecoration(new Spring.ElementDecoration({
                        elementId: "endpointStatusDtos0.endpointColorStatus.endpointColorStatusId",
                        widgetType: "dijit.form.FilteringSelect",
                        widgetAttrs: {
                            ignoreCase: true,
                            autoComplete: false
                        }
                    }));
                </script>
            </div>
            <div class="s_formrow">
                <label class="lightLabel" for="endpointColorStatus.endpointColorStatusId">Earnings Verification</label>
                <select id="endpointColorStatusId" name="endpointStatusDtos[1].endpointColorStatus.endpointColorStatusId" class="s_medium" onclick="changeFontColor(this.options[this.selectedIndex].style.backgroundColor)" onfocus="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor ;" onchange="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor">
                    <option value="-1">Select One</option>
                    <option style="background-color: #00FFFF;" value="2">Actively Testing</option>
                    <option style="background-color: #9ACD32;" value="1">Implemented</option>
                    <option style="background-color: #FF0000;" value="4">Issues</option>
                    <option style="background-color: #DB7093;" value="5" selected="selected">Other Requirements not in place</option>
                    <option style="background-color: #FFA500;" value="3">State In Development</option>
                    <option style="background-color: #2F4F4F;" value="6">States Not Implementing SIDES</option>
                </select>
                <script type="text/javascript">
                    Spring.addDecoration(new Spring.ElementDecoration({
                        elementId: "endpointStatusDtos1.endpointColorStatus.endpointColorStatusId",
                        widgetType: "dijit.form.FilteringSelect",
                        widgetAttrs: {
                            ignoreCase: true,
                            autoComplete: false
                        }
                    }));
                </script>
            </div>
            <div class="s_formrow">
                <label class="lightLabel" for="endpointColorStatus.endpointColorStatusId">Monetary Charge</label>
                <select id="endpointColorStatusId" name="endpointStatusDtos[2].endpointColorStatus.endpointColorStatusId" class="s_medium" onclick="changeFontColor(this.options[this.selectedIndex].style.backgroundColor)" onfocus="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor ;" onchange="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor">
                    <option value="-1">Select One</option>
                    <option style="background-color: #00FFFF;" value="2">Actively Testing</option>
                    <option style="background-color: #9ACD32;" value="1">Implemented</option>
                    <option style="background-color: #FF0000;" value="4" selected="selected">Issues</option>
                    <option style="background-color: #DB7093;" value="5">Other Requirements not in place</option>
                    <option style="background-color: #FFA500;" value="3">State In Development</option>
                    <option style="background-color: #2F4F4F;" value="6">States Not Implementing SIDES</option>
                </select>
                <script type="text/javascript">
                    Spring.addDecoration(new Spring.ElementDecoration({
                        elementId: "endpointStatusDtos2.endpointColorStatus.endpointColorStatusId",
                        widgetType: "dijit.form.FilteringSelect",
                        widgetAttrs: {
                            ignoreCase: true,
                            autoComplete: false
                        }
                    }));
                </script>
            </div>
            <div class="s_formrow">
                <label class="lightLabel" for="endpointColorStatus.endpointColorStatusId">Determination Decision</label>
                <select id="endpointColorStatusId" name="endpointStatusDtos[6].endpointColorStatus.endpointColorStatusId" class="s_medium" onclick="changeFontColor(this.options[this.selectedIndex].style.backgroundColor)" onfocus="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor ;" onchange="this.style.backgroundColor = this.options[this.selectedIndex].style.backgroundColor">
                    <option value="-1">Select One</option>
                    <option style="background-color: #00FFFF;" value="2">Actively Testing</option>
                    <option style="background-color: #9ACD32;" value="1" selected="selected">Implemented</option>
                    <option style="background-color: #FF0000;" value="4">Issues</option>
                    <option style="background-color: #DB7093;" value="5">Other Requirements not in place</option>
                    <option style="background-color: #FFA500;" value="3">State In Development</option>
                    <option style="background-color: #2F4F4F;" value="6">States Not Implementing SIDES</option>
                </select>
                <script type="text/javascript">
                    Spring.addDecoration(new Spring.ElementDecoration({
                        elementId: "endpointStatusDtos6.endpointColorStatus.endpointColorStatusId",
                        widgetType: "dijit.form.FilteringSelect",
                        widgetAttrs: {
                            ignoreCase: true,
                            autoComplete: false
                        }
                    }));
                </script>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<script type="text/javascript">
    function changeFontColor(rgb) {
        var x = rgb;
        var colors = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        var brightness = 1;
        var r = colors[1];
        var g = colors[2];
        var b = colors[3];

        var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;

        if (yiq <= 128) {
            //alert(yiq);
            $('#endpointColorStatusId').css('color', 'white');
        }
    }


    jQuery(document).ready(function() {
        //$('#endpointColorStatusId option:selected').each(function(){
        $('#bg').find('option:selected').each(function() {
            var color = ($(this).css('background'));
            alert(color);
            $('#endpointColorStatusId').css('background', color);
            test(color);
        });
    });
</script>

地位
分离信息
选择一个
主动测试
实施
问题
其他要求不到位
发展中的国家
非执行方的国家
Spring.add装饰（new Spring.element装饰）({
elementId:“endpointStatusDtos0.endpointColorStatus.endpointColorStatusId”，
widgetType:“dijit.form.FilteringSelect”，
WidgeAttrs：{
ignoreCase：是的，
自动完成：错误
}
}));
收入核实
选择一个
主动测试
实施
问题
其他要求不到位
发展中的国家
非执行方的国家
Spring.add装饰（new Spring.element装饰）({
elementId:“endpointStatusDtos1.endpointColorStatus.endpointColorStatusId”，
widgetType:“dijit.form.FilteringSelect”，
WidgeAttrs：{
ignoreCase：是的，
自动完成：错误
}
}));
货币费用
选择一个
主动测试
实施
问题
其他要求不到位
发展中的国家
非执行方的国家
Spring.add装饰（new Spring.element装饰）({
elementId:“endpointStatusDtos2.endpointColorStatus.endpointColorStatusId”，
widgetType:“dijit.form.FilteringSelect”，
WidgeAttrs：{
ignoreCase：是的，
自动完成：错误
}
}));
决定
选择一个
主动测试
实施
问题
其他要求不到位
发展中的国家
非执行方的国家
Spring.add装饰（new Spring.element装饰）({
elementId:“endpointStatusDtos6.endpointColorStatus.endpointColorStatusId”，
widgetType:“dijit.form.FilteringSelect”，
WidgeAttrs：{
ignoreCase：是的，
自动完成：错误
}
}));
函数changeFontColor（rgb）{
var x=rgb；
var colors=rgb.match（/^rgb\（\d+）\s*（\d+）\s*（\d+）$/）；
var亮度=1；
var r=颜色[1]；
var g=颜色[2]；
var b=颜色[3]；
var yiq=（（r*299）+（g*587）+（b*114））/1000；
如果（yiq您提出的问题是元素id在页面上必须是唯一的，那么您应该使用类：

$('#bg').find('option:selected').each(function () {
    var color = $(this).css('background');
    $('.s_medium').css('background', color);
    test(color);
});

关于你的第二个问题，它只适用于Chrome。不幸的是，你运气不好，因为option元素的背景色（和样式）设置不是100%跨浏览器的。我建议你要么使用自定义下拉插件，要么不使用特定的选项样式

演示：
#endpointColorStatusId应该是唯一的，请改用类。非主题：格式化HTML后，您似乎有几个额外的
标记。感谢您的响应dfsq！我使用类获得颜色，但它只选择第一个选项的颜色。每个选项都有一个与之关联的不同颜色，我希望t选定选项的颜色作为背景色。