javascript - 遍历 jquery 中的多个下拉列表

Question

您好，我有一个 for 循环，它会迭代并设置多个下拉菜单。我想遍历每个下拉菜单并设置背景颜色 onload 。出于某种原因，只有第一个列表填充颜色，而且也只在 Chrome 中填充。这是 fiddle 代码。我如何获得其余的 也填充颜色的列表。谢谢

http://jsfiddle.net/ritikia/ava2v8yw/1/

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>

Answer 1

您的问题是元素 ID 在页面上必须是唯一的。所以你应该改用类:

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

关于你的第二个问题，它只适用于 Chrome。不幸的是，您在这里很不走运，因为设置选项元素的背景颜色(和一般样式)不是 100% 跨浏览器。我建议您要么使用自定义下拉插件，要么不使用特定的选项样式。

演示:http://jsfiddle.net/ava2v8yw/2/