Question

我有选择选项下拉菜单。
选项也存储在列表中，我想根据列表项上的click事件更改选择选项。

<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>

// 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 arr = [];
var list = $('.choose_variations');

    // Store options in array
    $('.film option').each(function() {
        arr.push( $(this).text() );
    });

    // Append list items to ul.choose_variations
    $.each(arr, function(i) {
        $('<li>').text(arr[i]).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 option[text="' + $(this).text() + '"]').trigger("change"); 
});

这里是jsfiddle

非常感谢！

Answer 1

首先，您应修改数组以存储text的{{1}}和value：

option

然后点击链接，您可以var arr = $('.film option').map(function () { return { text: $(this).text(), value: $(this).val() }; }); select select选择value选项。

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

Updated fiddle

另请注意，如果arr变量仅用于构建li元素列表，则可以合并两个each()循环：

$('.film option').each(arr, function() {
    $('<li>', { text: $(this).text(), value: $(this).val() }.appendTo(list);
});

Answer 2

我使用了一个数据属性来保存选项值。

解决方案

jsfiddle

$('.film option').each(function() {
    arr.push( $(this).text() );
});

我认为不再需要

。

Answer 3

这是一个有效的脏版本：

演示@ Fiddle

代码更改：

list.on("click", "li", function() {
    $('.film').val( $.trim($(this).text().toLowerCase().replace(/\s+/g, "-"))); 
});

改进：

将选项值存储在列表项中作为数据属性，如：

<li data-opt-val="optionValueHere"></li>

然后：

list.on("click", "li", function() {
    $('.film').val( $(this).data("optVal") ); 
});

jQuery单击列表项并更改选择选项

3 个答案: