Iterating Through multiple dropdowns in jquery

Question

Hi I have for loop which iterates and set the multiple dropdowns. I want to iterate through each dropdown and set the background color onload . For some reason, only the first list populates the color and that too only in Chrome. here is the fiddle code. How do I get the rest of the lists to populate the color as well.thanks

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

the HTML code

<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>

#endpointColorStatusId should be unique, use classes instead. — dfsq
– dfsq, Commented Jun 8, 2015 at 15:11
Off topic: After formatting your HTML it appears that you have several extra </div> tags. — isherwood
– isherwood, Commented Jun 8, 2015 at 15:13

dfsq · Accepted Answer · 2015-06-08 15:13:15Z

2

You issue is that elements id must be unique on the page. So you should use classes instead:

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

Regarding your second question about that it only works in Chrome. Here unfortunately you are out of luck as setting background color (and styling in general) of the option element is not 100% cross-browser. I would recommend you either to use custom dropdown plugin or not to do specific options styles.

Demo: http://jsfiddle.net/ava2v8yw/2/

answered Jun 8, 2015 at 15:13

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

test Over a year ago

Thanks for the response dfsq! I get the color by using classes,but it only picks the color of the first option. Each option has a different color associated with it and I want that color of the selected option as the background color.

Collectives™ on Stack Overflow

Iterating Through multiple dropdowns in jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related