Как сделать ссылки на основе опции выбора?

Question

Мы используем ограниченный CMS (интернет-магазин), поэтому мы должны использовать скрипты. Проблема: у нас есть раскрывающийся список (select) с разными options, каждый продукт отличается. Нам нужно сделать кнопки вместо select. Например:

<select id="select-1"> 
    <option value="0">ААА</option> 
    <option value="1">BBB</option> 
    <option value="2">CCC</option> 
    <option value="3">DDD</option> 
</select> 

Нам необходимо (с помощью JQuery) сделать кнопки/ссылки на количество опций, каждая кнопка/ссылка является ссылкой на выборе value и содержит текст, который будет подходящим option, так что мы должны получить:

<div id="links"> 
    <a href="?">AAA</a> 
    <a href="?">BBB</a> 
    <a href="?">CCC</a> 
    <a href="?">DDD</a> 
</div> 

... где каждое звено выбирает соответствующий option.

Как сделать такие ссылки на основе jQuery?

Answer 1

Проверьте это:

var links = []; 
 
$("#select-1 option").each(function(){ 
 
    var opt = $(this); 
 
    links.push("<a href='"+opt.val()+"'>"+opt.text()+"</a>") 
 
}); 
 
$("#links").html(links.join())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select-1"> 
 
    <option value="0">ААА</option> 
 
    <option value="1">BBB</option> 
 
    <option value="2">CCC</option> 
 
    <option value="3">DDD</option> 
 
</select> 
 
<div id="links"> 
 

 
</div>