從下拉菜單中選取所有值（選定除外）

Question

在下拉列表中選擇一個值后，我想在此下拉列表中添加除所選值以外的所有值的新下拉列表。 第三，第四，...的方法相同。對於第三下拉值，除所選值外，所有其他值均來自第二個。 接下來所有的內容都會以這種方式下降。

用javaScript執行此操作的方法是什么？

HTML元素...

<select id="president" name="president" type="text">
    <option value="0">Select President</option>
    <option value="1">Name A</option>
    <option value="2">Name B</option>
    <option value="3">Name C</option>
    <option value="4">Name D</option>
    <option value="5">Name E</option>
    <option value="6">Name F</option>
    <option value="7">Name G</option>
    <option value="8">Name H</option>
    <option value="9">Name I</option>
</select>
<select id="vicepresident" name="vicepresident" type="text">
    <option value="0">Select Vice President</option>
</select>

Answer 1

將所有選項放入一個數組，將其傳遞給“ president”，然后獲取選定的索引，並將除此以外的所有其他值附加到副總裁的數組中。

Answer 2

得到了我的結果.........

<select class="slctfield" id="president" name="president" type="text">
    <option value="0">Select President</option>
    <option value="1">Name A</option>
    <option value="2">Name B</option>
    <option value="3">Name C</option>
    <option value="4">Name D</option>
    <option value="5">Name E</option>
    <option value="6">Name F</option>
    <option value="7">Name G</option>
    <option value="8">Name H</option>
    <option value="9">Name I</option>
</select>
<select class="slctfield" id="vicepresident" name="vicepresident" type="text"></select>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript"> 
    $('.slctfield').on('click', function() {
        var i = $('.slctfield').index(this);
        var j = i+1;
        var $options = $(this).find('option');
        var $tempDiv = $('<div/>');
        $options = $options.each(function (idx, option) {
        if (!$(option).prop('selected')) {
            $tempDiv.append($(option).clone());
        }
    });
    $('.slctfield:eq('+j+')').show();
    $('.slctfield:eq('+j+')').html($tempDiv.html());
    });
</script>

在這里，您可以使用'slctfield'類添加更多選擇字段。