title: Forcing multiple select changes and then reading the event
body: <p>I'm relatively new to jquery. I've been banging my head against this issue for a week now trying to figure out a way to do it.</p>
  
  <p>Basically, I have two identical selects that change a displayed number to 1 when selected, and then when changed to a different selection, change that original number back to 0. My original code worked fine, but I wanted to expand the code so that users could save a generated URL and reload their selections at a later date.</p>
  
  <p>Here is the working HTML. Same thing for the second select, only with the ID of ability2.</p>
  
  <pre><code>&lt;select id="ability1" onchange="attributeChoice( event )"&gt;&lt;option value="selected"&gt;Select&lt;/option&gt;&lt;option value="val1"&gt;One&lt;/option&gt;&lt;option value="val2"&gt;Two&lt;/option&gt;&lt;option value="val3"&gt;Three&lt;/option&gt;&lt;option value="val4"&gt;Four&lt;/option&gt;&lt;option value="val5"&gt;Five&lt;/option&gt;&lt;option value="val6"&gt;Six&lt;/option&gt;&lt;/select&gt;
  </code></pre>
  
  <p>And the working jquery</p>
  
  <pre><code>function attributeChoice( event ) {
  
    $( event.currentTarget ).change(function() {
      var attributeChange = this.id;
      var attributeSelect = $(this).find('option:selected').attr('value');
  
      $('span#' + attributeSelect).html( 1 );
      $('select#' + attributeChange ).on( 'change', function() {
        $('span#' + attributeSelect).html( 0 );
      });
      getTotals();
    });
  }
  </code></pre>
  
  <p>And then this bit of code disables the selected option of the other select so it can't be selected twice.</p>
  
  <pre><code>    $('select').change(function() {
        $('select#ability1, select#ability2').not(this).children('option[value=' + this.value + ']').attr('disabled', true).siblings().removeAttr('disabled');
        $('select#ability1, select#ability2').not(this).children('option[value=selected]').attr('disabled', true);
      });
  </code></pre>
  
  <p>From what I've read, I need to use a .change() to force the onchange of the select to fire. So far I'm not having any luck. Originally I had the attributeChoice function setup using event.target but I learned that it actually looks all the way back to beginning of what triggered it. I switched over to using this and event.currentTarget instead.</p>
  
  <p>Here is my code I've been toying with. Any ideas on what I'm doing wrong here? (hattr1 is the index of the selected item that is pulled from the URL)</p>
  
  <pre><code>$('select#ability1').change(function() {
      $('select#ability1 option').eq(hattr1).prop('selected', true);
      $('select#ability1').change();
  });
  </code></pre>