excluding values on Select - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: DropDownList, Exluding Values, jqxDropDownList, multiple, value

This topic contains 2 replies, has 2 voices, and was last updated by marveen 11 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

excluding values on Select Posts

August 27, 2013 at 7:15 pm excluding values on Select #27813

marveen

Participant

Dear JqwTeam, i got a cuestion about this topic this is the issue.

1) I have 4 DropDownList Controls (all with the same source). (A,B,C,D)

2) When I select a Value un A , i have to remove it from (B,C,D).
3) When I select a Value un B , i have to remove it from (A,C,D).
4) When I select a Value un C , i have to remove it from (A,B,D).
4) When I select a Value un D , i have to remove it from (A,B,C).

i fired the remove method when i “select”.

$(‘#JQWddlColor’).on(‘select’, function (event) {});

But this make me redundance onthe method becouse , every time i make de “removeitem” , this fire the “select” method
after , and make de redudante again and again.

when i use 2 o more ddl width the same action….
Q: is a better way to make de DDl ecluding by value?,

the i put the 4 methos this halt the browser windows.. : /

thanks in advance.

August 28, 2013 at 8:17 am excluding values on Select #27837

Dimitar

Participant

Hello marveen,

Here is the solution:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var source = [
                    "A",
                    "B",
                    "C",
                    "D"
		        ];
            var dropDownLists = $("#content div");
            dropDownLists.jqxDropDownList({ source: source, width: '200px', height: '25px' });
            var updating = false;
            dropDownLists.bind('select', function (event) {
                if (!updating) {
                    var id = event.target.id;
                    value = event.args.item.value;
                    var otherDropDownLists = dropDownLists.not("#" + id);
                    for (var i = 0; i < otherDropDownLists.length; i++) {
                        var currentId = otherDropDownLists[i].id;
                        var selectedItem = $("#" + currentId).jqxDropDownList("getSelectedItem")
                        var itemToRemove = $("#" + currentId).jqxDropDownList("getItemByValue", value);
                        if (itemToRemove) {
                            updating = true;
                            $("#" + currentId).jqxDropDownList("removeItem", itemToRemove);
                            if (selectedItem) {
                                $("#" + currentId).jqxDropDownList("selectItem", selectedItem);
                            };
                        };
                    };
                    updating = false;
                };
            });
        });
    </script>
</head>
<body>
    <div id='content'>
        <div id='jqxdropdownlist1'>
        </div>
        <div id='jqxdropdownlist2'>
        </div>
        <div id='jqxdropdownlist3'>
        </div>
        <div id='jqxdropdownlist4'>
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

August 28, 2013 at 3:24 pm excluding values on Select #27867

marveen

Participant

Thanks a lot!! works perfectly . this is my result code for the problem
using a webservices for source.

was usefull!! u are the best!

---
 /* DROP DOWN LIST */
        var updatingJQWddlEjeX = false;
        $('#JQWddlEjeX').on('select', function (event) {
            if (!updatingJQWddlEjeX) {
                alert("JQWddlEjeX");
                var args = event.args;
                var itemJQWddlEjeX = $('#JQWddlEjeX').jqxDropDownList('getItem', args.index);
                if (itemJQWddlEjeX != null) {
                    var updatingJQWddlEjeX = true;                    
                    //REMOVE ON THAT
                    $("#JQWddlColor").jqxDropDownList('removeItem', itemJQWddlEjeX);
                    $("#JQWddlEjeY").jqxDropDownList('removeItem', itemJQWddlEjeX);
                    $("#JQWddlTamano").jqxDropDownList('removeItem', itemJQWddlEjeX);
                }
            };
            updatingJQWddlEjeX = false;
        });
        var updatingJQWddlColor = false;
        $('#JQWddlColor').on('select', function (event) {
            if (!updatingJQWddlColor) {
                alert("JQWddlColor");
                var args = event.args;
                var itemJQWddlColor = $('#JQWddlColor').jqxDropDownList('getItem', args.index);
                if (itemJQWddlColor != null) 
                {
                    updatingJQWddlColor = true;                    
                    //REMOVE ON THAT
                    $("#JQWddlEjeX").jqxDropDownList('removeItem', itemJQWddlColor);
                    $("#JQWddlEjeY").jqxDropDownList('removeItem', itemJQWddlColor);
                    $("#JQWddlTamano").jqxDropDownList('removeItem', itemJQWddlColor); 
                                                                        
                }
            };
            updatingJQWddlColor = false;
        });
        var updatingJQWddlEjeY = false;
        $('#JQWddlEjeY').on('select', function (event) {
            if (!updatingJQWddlEjeY) {
                alert("JQWddlEjeY");
                var args = event.args;
                var itemJQWddlEjeY = $('#JQWddlEjeY').jqxDropDownList('getItem', args.index);
                if (itemJQWddlEjeY != null) {
                    updatingJQWddlEjeY = true;
                    //GET
                    var itemJQWddlEjeX = $("#JQWddlEjeX").jqxDropDownList('getSelectedItem');
                    var itemJQWddlColor = $("#JQWddlColor").jqxDropDownList('getSelectedItem');
                    var itemJQWddlTamano = $("#JQWddlTamano").jqxDropDownList('getSelectedItem');
                                        
                    //REMOVE ON THAT
                    $("#JQWddlEjeX").jqxDropDownList('removeItem', itemJQWddlEjeY);
                    $("#JQWddlColor").jqxDropDownList('removeItem', itemJQWddlEjeY);
                    $("#JQWddlTamano").jqxDropDownList('removeItem', itemJQWddlEjeY);
                }
            };
            updatingJQWddlEjeY = false;
        });
        var updatingJQWddlTamano = false;
        $('#JQWddlTamano').on('select', function (event) {
            if (!updatingJQWddlTamano) {
                alert("JQWddlTamano");
                var args = event.args;
                var itemJQWddlTamano = $('#JQWddlTamano').jqxDropDownList('getItem', args.index);
                if (itemJQWddlTamano != null) {
                    updatingJQWddlTamano = true;                                        
                    //REMOVE ON THAT
                    $("#JQWddlEjeX").jqxDropDownList('removeItem', itemJQWddlTamano);
                    $("#JQWddlColor").jqxDropDownList('removeItem', itemJQWddlTamano);
                    $("#JQWddlEjeY").jqxDropDownList('removeItem', itemJQWddlTamano);
                }
            };
            updatingJQWddlTamano = false;       
        });
        /* DROP DOWN LIST */
  
---

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.