Jquery自动填充选择选项

Question

1. 我有三个选择选项，具有相同的class ='film'
2. 我有一个存储所有选择选项的列表。

3. 点击任何列表项时，第一个选择选项将被更改，我想使用选项='---'

   自动填充其他选项

   <select id="pa_sc30-glossy-colors" name="attribute_pa_sc30-glossy-colors" class="film">
       <option value="">Choose color…</option>
       <option class="active" id="440" value="440" hidden="hidden">---</option>
       <option class="active" id="30-23-stone-yellow" value="30-23-stone-yellow">30-23 Stone Yellow</option>
       <!-- other options... -->
   </select>
   
   <select id="pa_sc30-glossy-colors" name="attribute_pa_sc30-glossy-colors" class="film">
       <option value="">Choose color…</option>
       <option value="">---</option>
   </select>
   
   <select id="pa_sc30-glossy-colors" name="attribute_pa_sc30-glossy-colors" class="film">
       <option value="">Choose color…</option>
       <option value="">---</option>
   </select>
   

jQuery的：

// All options are stored in array 'var arr []'
// Each value of the array is stored in the tag '<li>'
// tag '<li>' is added to the list <ul class = "choose_variations">

 var list = $('.choose_variations');

  // Append list items to ul.choose_variations
   $('.film option').each(function(i) {
        $('<li>').text($(this).text()).data('val',$(this).val()).appendTo(list);
   });

   // Remove '---' and 'Choose color' list items    
   $('.choose_variations li').filter(function() {
        if( $(this).text() == '---' || $(this).text() == 'Choose color…') {
            $(this).remove();
        }
    });


   // change select option if is clicked on list item
   $('.choose_variations li').click(function() {
        $('.film').val($(this).data('val'));
   });

这是DEMO

Answer 1

选中此Fiddle

为空白选项添加了一个值：

<option value="---">---</option>

更改了li点击功能：

$('.choose_variations li').click(function() {
    $('.film').val("---");
    $('.film:first').val($(this).data('val'));    
});