從鏈接中選擇一個值並動態創建<a>鏈接

Question

我有一個模板，可以根據產品選項輸出選項選項值名稱和數量總是不同的。

我需要找到一種方法將這些選項轉換爲<a>，因此如果其中一個<a>被點擊，則會選擇相應的下拉選項。

我需要的是類似於this example

但是再次<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()); 
});