Question

我有一个模板，根据产品选项值名称输出选择选项，数量总是不同。

我需要找到一种方法将这些选项转换为<a>，因此如果点击其中一个<a>，则会选择相应的下拉选项。

然而，<a>标签必须根据<select>及其选项动态创建。

选择代码示例，选择名称现在总是相同的，它是不同的。

<select name="212" size="1"> 
<option value="White">White</option> 
<option value="Blue">Blue</option> 
<option value="Yellow">Yellow</option> 
</select>

Answer 1

更新了您提供的小提琴。 http://jsfiddle.net/TZ464/5/你想要的是什么吗？

<强> HTML

<div id="drop-down">
<form>
<select id="items" name="items">
<option value="1">Colors</option>
<option value="2">Item 1</option>
<option value="3">Item 2</option>
<option value="4">Item 3</option>
</select>
</form>
</div>

<a class="dynamic-link"></a>

<强>的jQuery

跳过第一个选项：

$('#drop-down select').find('option').each(function(i) {

    if(i > 0) {

        var self = $(this);

        var link = $('<a href="#" class="dynamic-links">' + self.text() + '</a>');

        if($('a.dynamic-links').size() == 0) {

            $('body').prepend(link);

        }
        else {

            $('a.dynamic-links').last().after(link);

        }

    }

});



$('a').on('click', function() {  

    // Get the selected item:
    $('#drop-down select option:selected').attr('selected', false);
    $('#drop-down select option:contains("'+$(this).text()+'")').attr('selected', true);
    $('#drop-down select').trigger('change');

});

$('#drop-down select').on('change', function() {  
    // Get the selected <option>:
    var selected = $(this).children('option:selected');
    $('a.dynamic-link').text(selected.text());
});

所有选项：

$('#drop-down select').find('option').each(function() {

    var self = $(this);

    var link = $('<a href="#" class="dynamic-links">' + self.text() + '</a>');

    if($('a.dynamic-links').size() == 0) {

        $('body').prepend(link);

    }
    else {

        $('a.dynamic-links').last().after(link);

    }

});

$('a').on('click', function() {  

    // Get the selected item:
    $('#drop-down select option:selected').attr('selected', false);
    $('#drop-down select option:contains("'+$(this).text()+'")').attr('selected', true);
    $('#drop-down select').trigger('change');

});

$('#drop-down select').on('change', function() {  
    // Get the selected <option>:
    var selected = $(this).children('option:selected');
    $('a.dynamic-link').text(selected.text());
});

从链接中选择一个值并动态创建<a> links</a>

1 个答案: