Question

嗨我有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>

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/

迭代通过jquery中的多个下拉列表

1 个答案: