Javascript глобальная переменная против HTML атрибута данных

Question

Когда мы используем $(this).data('options',$('#send1 option').clone());, это работает, но когда я использую глобальную переменную для хранения данных списка, это не работает. В чем разница между этими двумя методами?

Первый метод (работает): этот код клонирует данные в атрибут data, а затем фильтрует и копирует в send1 и send2.

$("#receiver").change(function() { 
  if ($(this).data('options') == undefined) {
    /* Takes an array of all options-2 and kind of embeds it in select1 */
    $(this).data('options',$('#send1 option').clone());
  }
	if ($(this).data('options-2') == undefined) {
	  $(this).data('options-2',$('#send2 option').clone());
  }

  var id1 = $(this).val();

  console.log(id1);

  var options1 = $(this).data('options').filter('[value=' + id1 + ']');
  var options2 = $(this).data('options-2').filter('[value=' + id1 + ']');

  $('.send1 ').html(options1);
  $('.send2 ').html(options2);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<h5>Hello ListBox</h5>

<div>
  <select name="Receiver" id="receiver">
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
  </select>

  <select class="send1" name="ShipFrom1" id="send1">
    <option value="1">Banana</option>
    <option value="1">Apple</option>
    <option value="1">Orange</option>
    <option value="2">Wolf</option>
    <option value="2">Fox</option>
    <option value="2">Bear</option>
    <option value="3">Eagle</option>
    <option value="3">Hawk</option>
    <option value="4">BWM<option>
  </select>

  <select  class="send2" name="ShipFrom2" id="send2">
    <option value="1">Banana</option>
    <option value="1">Apple</option>
    <option value="1">Orange</option>
    <option value="2">Wolf</option>
    <option value="2">Fox</option>
    <option value="2">Bear</option>
    <option value="3">Eagle</option>
    <option value="3">Hawk</option>
    <option value="4">BWM<option>
  </select>
</div>

Второй метод (не работает): в этом коде используется глобальная переменная Javascript. Я пытаюсь клонировать параметры send1 в a и затем фильтровать глобальную переменную в соответствии со значением receiver. Затем я копирую результат a в send1 и send2.

var a = $('#send1 option').clone();

$("#receiver").change(function() { 

  var id1 = $(this).val();

  console.log(id1);

  var options1 = a.filter('[value=' + id1 + ']');

  $('.send1 ').html(options1);
  $('.send2 ').html(options1);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
<div>
  <select name="Receiver" id="receiver">
    <option value="1">Fruit</option>
    <option value="2">Animal</option>
    <option value="3">Bird</option>
    <option value="4">Car</option>
  </select>
  
  <select class="send1" name="ShipFrom1" id="send1">
    <option value="1">Banana</option>
    <option value="1">Apple</option>
    <option value="1">Orange</option>
    <option value="2">Wolf</option>
    <option value="2">Fox</option>
    <option value="2">Bear</option>
    <option value="3">Eagle</option>
    <option value="3">Hawk</option>
    <option value="4">BWM<option>
  </select>
  
  <select  class="send2" name="ShipFrom2" id="send2">
    <option value="1">Banana</option>
    <option value="1">Apple</option>
    <option value="1">Orange</option>
    <option value="2">Wolf</option>
    <option value="2">Fox</option>
    <option value="2">Bear</option>
    <option value="3">Eagle</option>
    <option value="3">Hawk</option>
    <option value="4">BWM<option>
  </select>
</div>

Answer 1

Я не думаю, что вы используете лучший метод для этого ...

Я предлагаю:

function setOption() {
  var receiverVal = $('#receiver').val() 
  $('#send1 option:not(.'+receiverVal+')').hide();  
  $('#send2 option:not(.'+receiverVal+')').hide();  
  $('#send1 option.'+receiverVal).show();  
  $('#send2 option.'+receiverVal).show();

  $('#send1 option:visible').first().attr('selected', 'selected');
  $('#send2 option:visible').first().attr('selected', 'selected');
}
setOption();

$("#receiver").change(setOption)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<select name="Receiver" id="receiver">
  <option value="fruit" >Fruit</option>
  <option value="animal">Animal</option>
  <option value="bird"  >Bird</option>
  <option value="car"   >Car</option>
</select>

<select class="send1" name="ShipFrom1" id="send1">
  <option value="10" class="fruit"  >Banana </option>
  <option value="11" class="fruit"  >Apple  </option>
  <option value="12" class="fruit"  >Orange </option>
  <option value="21" class="animal" >Wolf   </option>
  <option value="22" class="animal" >Fox    </option>
  <option value="23" class="animal" >Bear   </option>
  <option value="31" class="bird"   >Eagle  </option>
  <option value="32" class="bird"   >Hawk   </option>
  <option value="41" class="car"    >BWM    <option>
</select>

<select  class="send2" name="ShipFrom2" id="send2"  class="bird">
  <option value="10" class="fruit"  >Banana </option>
  <option value="11" class="fruit"  >Apple  </option>
  <option value="12" class="fruit"  >Orange </option>
  <option value="21" class="animal" >Wolf   </option>
  <option value="22" class="animal" >Fox    </option>
  <option value="23" class="animal" >Bear   </option>
  <option value="31" class="bird"   >Eagle  </option>
  <option value="32" class="bird"   >Hawk   </option>
  <option value="41" class="car"    >BWM    <option>
</select>