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

select a value from a link and dynamically create <a> links

本文关键字：链接 创建 动态 一个 选择      更新时间：2023-09-26

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

我需要找到一种方法将这些选择选项转换为<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>

对您提供的小提琴进行更新。http://jsfiddle.net/TZ464/5/是你想要的吗?

<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());
});
相关文章：