Fatal编程技术网

动态多下拉Javascript Ajax

javascript ajax

动态多下拉Javascript Ajax,javascript,ajax,Javascript,Ajax,我想知道是否可以做一个动态下拉列表。假设我有3个动态下拉列表，它的值是3个用户，我希望它是灵活的 e、 g: 如果从dropdown1=UserC中选择， dropdown2和dropdown3将列出剩余的用户UserA和UserB， 同时，当从dropdown3=UserA中选择时，dropdown1列出了2 user=UserB和UserC，dropdown2将只列出1个用户UserB 我知道这很棘手，但是可以用javascript或AJAX创建吗？试试下面的代码，当有人再次选择第一个项目时

我想知道是否可以做一个动态下拉列表。假设我有3个动态下拉列表，它的值是3个用户，我希望它是灵活的

e、 g:

如果从dropdown1=UserC中选择， dropdown2和dropdown3将列出剩余的用户UserA和UserB， 同时，当从dropdown3=UserA中选择时，dropdown1列出了2 user=UserB和UserC，dropdown2将只列出1个用户UserB

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

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

<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>
检查这个

    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>
。但是它不会像你提到的那样重新计算值。尝试更改相同的…

任何事情都是可能的。很好，但是当选择dropdown1后，将其设置回-Select-该值不会在dropdown2和dropdown3重新计算。是的，我知道这一点，并在我的回答中提到。您必须记住当前选择框的最后一个值，如果其值更改为-select-，则将最后一个值添加到所有组合框中（如果它们不存在）。明白了，我尝试使用jquery，并对urs javascript var prevVal进行了一些修改；$document.readyfunction{$'[id^=dropdown]'。单击函数{prevVal=$this.val；}；$'[id^=dropdown]'。更改函数{var id=$this.attrid.replacedropdown，；var val=$this.val；forvar i=1；我很高兴知道我的答案对您有所帮助。 
    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>