HTML Selected Value Reordering via JavaScript
<p>Given the following HTML selects:</p>

<pre><code>&lt;select id="HtmlSelect1"&gt;
    &lt;option value="1" selected="selected"&gt;1&lt;/option&gt;
    &lt;option value="2"&gt;2&lt;/option&gt;
    &lt;option value="3"&gt;3&lt;/option&gt;
    &lt;option value="4"&gt;4&lt;/option&gt;
&lt;/select&gt;

&lt;select id="HtmlSelect2"&gt;
    &lt;option value="1"&gt;1&lt;/option&gt;
    &lt;option value="2" selected="selected"&gt;2&lt;/option&gt;
    &lt;option value="3"&gt;3&lt;/option&gt;
    &lt;option value="4"&gt;4&lt;/option&gt;
&lt;/select&gt;

&lt;select id="HtmlSelect3"&gt;
    &lt;option value="1"&gt;1&lt;/option&gt;
    &lt;option value="2"&gt;2&lt;/option&gt;
    &lt;option value="3" selected="selected"&gt;3&lt;/option&gt;
    &lt;option value="4"&gt;4&lt;/option&gt;
&lt;/select&gt;

&lt;select id="HtmlSelect4"&gt;
    &lt;option value="1"&gt;1&lt;/option&gt;
    &lt;option value="2"&gt;2&lt;/option&gt;
    &lt;option value="3"&gt;3&lt;/option&gt;
    &lt;option value="4" selected="selected"&gt;4&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>Scenario 1: If I change the selected value in HtmlSelect4 to 2, the selected value for HtmlSelect2 should change to 3 and the selected value for HtmlSelect3 should change to 4. </p>

<p>Scenario 2: If I change the selected value for HtmlSelect2 to 3, the selected value for HtmlSelect3 should change to 2.</p>

<p>In summary, I am reordering the selected value of the other drop down lists based upon one of the other drop down lists being changed. How do I accomplish this in JavaScript?</p>

<p>Note: The number of drop down lists and options could vary as these are being driven by data in a database.</p>

<p>Below is what I tried that should have theoretically worked for scenario 1, but didn't. It's a start in the direction of what I am trying to do.</p>

<pre><code>&lt;script&gt;
        function SelectChange(selectControl)
        {
            var controlDiv = document.getElementById("SomeDiv");
            var controlSelects = controlDiv.getElementsByTagName("select");
            for (var selectIndex = 0; selectIndex &lt; controlSelects.length; selectIndex++)
            {
                if (controlSelects[selectIndex].id.indexOf("SelectControlPrefix") != -1)
                {
                    if (controlSelects[selectIndex].value &gt;= selectControl.value)
                    {
                        for (var optionIndex = 0; optionIndex &lt; controlSelects[selectIndex].options.length; optionIndex++)
                        {
                            if (controlSelects[selectIndex].options[optionIndex].value == controlSelects[selectIndex].options.value + 1)
                            {
                                controlSelects[selectIndex].options[optionIndex].selected = "selected";
                            }
                        }
                    }
                }
            }
        }
    &lt;/script&gt;
</code></pre>
