Question

我想知道是否可以进行动态下拉列表。假设我got 3 dynamic dropdown的值为三个用户，我希望它是灵活的。

e.g：

dropdown1 : UserA, UserB and UserC

dropdown2 : UserA, UserB and UserC

dropdown3 : UserA, UserB and UserC

if selected from dropdown1 = UserC, dropdown2 and dropdown3 will list out the remaining user UserA and UserB, and at the same time when selected from dropdown3 = UserA then the dropdown1 listed 2 user = UserB and UserC and dropdown2 will list only 1 user UserB.

我知道这很棘手，但是可以使用javascript或使用AJAX创建吗？

Answer 1

尝试下面的代码，当有人再次选择第一个项目时，您可能需要添加逻辑来添加未选择的项目

<HTML>
    <BODY>
        <FORM name="addproductfrm" id="addproductform" method="POST" action="/storeproduct">
            <select name="dropdown1" id="dropdown1" onchange="removeSelectedItem(this)">
                <option value="">-- Select --</option>
                <option value="User A">User A</option>
                <option value="User B">User B</option>
                <option value="User C">User C</option>
            </select>

            <select name="dropdown2" id="dropdown2" onchange="removeSelectedItem(this)">
                <option value="">-- Select --</option>
                <option value="User A">User A</option>
                <option value="User B">User B</option>
                <option value="User C">User C</option>
            </select>

            <select name="dropdown2" id="dropdown2" onchange="removeSelectedItem(this)">
                <option value="">-- Select --</option>
                <option value="User A">User A</option>
                <option value="User B">User B</option>
                <option value="User C">User C</option>
            </select>
        </FORM>
    </BODY>

    <script type="text/javascript">
    function removeSelectedItem(selectedItem)
    {
        var selectedValue = selectedItem.options[selectedItem.selectedIndex].value
        console.log(selectedValue);
        var selectBoxes = document.getElementsByTagName("select");

        for (var i=0; i < selectBoxes.length; i++)
        {
            var curValue = selectBoxes[i].options[selectBoxes[i].selectedIndex].value

            for (var j=1; j < selectBoxes[i].options.length; j++)
            {
                if (j != selectBoxes[i].selectedIndex && selectBoxes[i].options[j].value == selectedValue)
                    selectBoxes[i].remove(j);
            }
        }
    }
    </script>
</HTML>

Answer 2

检查这个

    Select User:<select name="userSelect" id="first">
    <option value="">-- Select --</option>
    <option value="userA">userA</option>
    <option value="userB">userB</option>
    <option value="userC">userC</option>
    </select>
    Select User:<select name="userSelect" id="second">
    <option value="">-- Select --</option>
    <option value="userA">userA</option>
    <option value="userB">userB</option>
    <option value="userC">userC</option>
    </select>
    Select User:<select name="userSelect" id="third">
    <option value="">-- Select --</option>
    <option value="userA">userA</option>
    <option value="userB">userB</option>
    <option value="userC">userC</option>
    </select>

     <script>
     $(document).ready(function() {
     $("select[name=userSelect]").change(
     function() {
     var all = [];
     var arrId=$("select[name=userSelect]");
     for(i=0;i<arrId.length;i++){
    //alert($(arrId[i]).attr('id'));
    all.push($(arrId[i]).attr('id'));
     }

    var index = all.indexOf($(this).attr('id'));
    all.splice(index, 1);
    for(i=0;i<all.length;i++){
    $('#'+all[i]+'').find("[value="+$(this).val()+"]").remove();
    }
   //var selectId=$(this).attr('id');
    //var selectedVal=$(this).val();
    //alert( $(this).val());
            });
     });

   </script>

。但是你提到的不重新计算的值试着改变它......

动态多下拉Javascript Ajax

2 个答案: