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>

​