Javascript 全局变量与 HTML 数据属性

Question

When we use $(this).data('options',$('#send1 option').clone()); , it works, but when I use a global variable to store list data, it does not work. What is the difference between these two methods?

First method (works): This code clones data to the data attribute and then filters and copies to both send1 and 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>

Second method (doesn't work): This code uses a Javascript global variable. I am trying to clone the send1 options to a and then filter the global variable according to the value of receiver . Then, I copy the a result to both send1 and 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

I don't think you are using the best method for this...

I suggest:

 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>