Jquery 自动填充 select 选项

Question

我有三个 select 选项相同 class = 'film'
我有一个存储所有 select 选项的列表。

当点击任何列表项时，第一个 select 选项将被更改，我想自动填充其他 select 选项，选项 = '---'

<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'));    
});

Jquery 自动填充 select 选项

Jquery autofill select options

html

jquery

select