jquery change select inputs selected values based on another select input

Question

I have 2 select inputs, one for #customer and another for #ticket which have the following option structure:

customer

<option value="123">

ticket

<option value="" customer="123">

so each option in the ticket select has the related customer to the ticket record

i want to be able to hide all ticket options where the customer attribute does not equal the selected customer value and vice versa, so select the correct customer value where the customer attribute of the ticket option equals the value of the customer option

for the first part, my code is:

$("#customer").change(function(){
    if($(this).val() !== $("#ticket").find('option:selected').attr('customer')) {

    }
});

and inside the, if i have tried:

$("#ticket").not("[customer*=" + $(this).val() + "]").hide();

and

$("#ticket option[customer=" + $(this).val() + "]").hide();

but neither work as expected.

I updated my answer below to reflect your select2 scenario. Can you please mark it as accepted if it works for you? — David
– David, Commented Mar 7, 2017 at 17:59

David · Accepted Answer · 2017-03-06 20:14:10Z

1

UPDATE: Changed options to reflect new information on this being a select2 dropdown.

Try this: (see https://jsfiddle.net/yrLbvs5g/ for working demo)

<select id="customer">
</select>

<select id="ticket">
</select>

<script type="text/javascript">
    $(document).ready(function() {
        // data array all 'customer' options
        var customers = [
            { id: '0', text: '- Customers -'},
            { id: '123', text: 'customer 123'},
            { id: '124', text: 'customer 124'},
            { id: '125', text: 'customer 125'},
            { id: '126', text: 'customer 126'},
            { id: '127', text: 'customer 127'},
        ];
        // populate customer dropdown with options from array
        $("#customer").select2({
            data: customers
        }); 
        // data array for all 'ticket' options
        var tickets = [
            { id: '0', text: '- Tickets -', customer: ''},
            { id: '1', text: 'ticket 1', customer: '123'},
            { id: '2', text: 'ticket 2', customer: '123'},
            { id: '3', text: 'ticket 3', customer: '124'},
            { id: '4', text: 'ticket 4', customer: '126'},
            { id: '5', text: 'ticket 5', customer: '126'},
        ];  

        // function to populate tickets both on load and on change of 'customer'
        jQuery.fn.setTickets = function(reset) {
            // if flagged to reset, this will empty the select2() options for 'ticket' below
            if (! reset) { var reset = false; }

            // get currently-selected customer value
            var customer = $(this).val();

            // build new data array using 'tickets' as our data source, but then excluding
            // options that don't match the 'customer' value above
            var new_tickets = [];
            for (var i=0; i < tickets.length; i++) {
                // includes ticket if no customer is selected ('0') or if the ticket itself has
                // no id/value (id '0' = '- Tickets -', or our blank title option), or if the
                // customer matches the 'customer' attribute of the tickets data array
                if (customer=='0' || tickets[i].id=='0' || customer==tickets[i].customer) {
                    new_tickets.push(tickets[i]);
                }
            }

            // reset previously-populated select2() options
            if (reset) {
                $("#ticket").select2('destroy').empty();
            }
            // populate tickets with new 'new_tickets' data array, and trigger the change to 
            // tell select2() to re-build options
            $("#ticket").select2({ data: new_tickets }).trigger('change');
        }
        // on document load, build tickets with no reset
        $("#customer").setTickets();

        // on customer change, re-populate tickets with reset passed in to erase previous ticket options
        $("#customer").change(function(){
            $(this).setTickets(1);
        });
    });
</script>

edited Mar 6, 2017 at 20:14

answered Mar 3, 2017 at 19:28

David

4661 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

charlie Over a year ago

where is #companyid coming from?

David Over a year ago

Sorry I used the wrong reference name when pointing to the customer dropdown, I updated the code just now.

charlie Over a year ago

i thought so :) - its working but when i change the selected #customer option, it is not hiding the other #ticket options

David Over a year ago

It's working for me. The tickets dropdown will default to select the "- Tickets -" option, and will hide the non-related options. What jquery version are you on?

charlie Over a year ago

i dont think it should make a difference, but i am using select2

|

Collectives™ on Stack Overflow

jquery change select inputs selected values based on another select input

customer

ticket

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

customer

ticket

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related