jquery的变化选择输入选择基于另一种选择输入

Question

我有2个选择输入，一个用于#customer，另一个用于具有以下选项结构#ticket值：

客户

<option value="123"> 

票

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

所以在机票每个选项选择具有相关客户到售票记录

我希望能够隐藏所有客户属性不等于所选客户价值的所有客票选项，因此选择正确的客户价值，其中客票属性的客户属性等于客户选项的价值

的第一部分，我的代码是：

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

    } 
}); 

和里面的，如果我曾尝试：

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

和

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

但都没有按预期工作。

Answer 1

更新：更改选项以反映这是一个select2下拉列表中的新信息。

试试这个：（见https://jsfiddle.net/yrLbvs5g/的工作演示）

<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>