Javascript 从链接中选择一个值并动态创建链接

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

我需要找到一种方法将这些选择选项转换为

然而，标签必须根据其选项动态创建

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

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

---

对您提供的小提琴进行了更新。这是你想要的吗

HTML

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

---

因此，您希望外部链接在单击时选择您的选项之一？您能否显示选项的示例，以及它们应如何确定创建的链接？在问题中添加了选择代码示例select的id名称会一直动态更改，是否有was引用div name“product options”中的任何select元素？select的id名称始终动态更改，是否有was引用div name“product options”中的任何select元素？我猜您是指div id“product options”？$'产品选项选择'。在您的示例中，您引用了您知道的选择选项的ID。在这种情况下，我的模板会随机输出select选项的id。那么，有没有一种方法可以将此javascript应用于div id=下拉列表中的任何元素呢？当值不是1,2,3,4….时，这个示例现在就可以工作了。。。。我的值总是不同的名称，而不是数字。你能这样修改吗？谢谢我的选择看起来像这个黑-红-绿-橙

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