Javascript 将下拉列表转换为单选按钮，不修改HTML

所以这是一种例外情况——我有一个插件，由于合同原因我不能修改。它显示一组下拉列表，我需要它显示一组单选按钮。是否有一种js/jquery方法可以将下拉列表转换为单选按钮，而无需更改HTML。记住，我可以添加东西——我只需要直接修改插件（以及HTML）

我明白这是一种不好的方式，相信我，我和你一样不喜欢它

可能通过检测下拉选项的值，然后将其重新格式化为单选按钮，隐藏原始下拉选项

<form action="http://example.net/store/cart/" method="post" class="shopp product"> 
  <ul class="variations"> 
    <li> 
      <label for="options-1">Music Download</label> 
      <select name="products[117][options][]" class="category-catalog product117 options" id="options-1">
        <option value="">Select an option</option> 
        <option value="1">Full Album</option> 
        <option value="7">Theme</option> 
        <option value="8">Simian Segue  </option> 
        <option value="9">DK Island Swing</option> 
        <option value="10">Cranky's Theme</option> 
        <option value="11">Cave Dweller Concert</option> 
        <option value="12">Bonus Room Blitz</option> 
        <option value="13">Aquatic Ambiance</option> 
        <option value="14">Candy's Love Song</option> 
        <option value="15">Bad Boss Boogie</option> 
        <option value="16">Mine Cart Madness</option> 
        <option value="17">Life in the Mines</option> 
        <option value="18">Voices of the Temple </option> 
      </select>
    </li>       
  </ul> 

  <p> 
    <select name="products[117][quantity]" id="quantity-117">
      <option selected="selected" value="1">1</option><option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option><option value="5">5</option>
      <option value="6">6</option><option value="7">7</option>
      <option value="8">8</option><option value="9">9</option>
      <option value="10">10</option><option value="11">11</option><option value="12">12</option>
      <option value="13">13</option><option value="14">14</option>
      <option value="15">15</option><option value="20">20</option>
      <option value="25">25</option>
      <option value="30">30</option><option value="40">40</option>
      <option value="50">50</option><option value="75">75</option>
      <option value="100">100</option>
    </select>

    <input type="hidden" name="products[117][product]" value="117" />
    <input type="hidden" name="products[117][category]" value="catalog" />
    <input type="hidden" name="cart" value="add" />
    <input type="submit" name="addtocart"  value="Add to Cart" class="addtocart" />
  </p> 

</form>

音乐下载
选择一个选项
全集
主题
猿猴
DK岛秋千
古怪的主题
洞穴居民音乐会
奖金房闪电战
水生环境
坎蒂的情歌
坏老板布吉
矿车疯狂
矿山生活
圣殿之声



12
3.
45
67
89
101112
1314
1520
25
3040
5075
100

隐藏下拉列表并将新的单选元素放置在表单外部，它们不需要发布，只需更新下拉列表值即可

$("#d option").each(function(i, e) { // get the options
    $("<input type='radio' name='r' />") // create a radio element
        .attr("value", $(this).val()) // set the value
        .attr("checked", i == 0) // check the first by default
        .click(function () { // add event click which updates the dropdown
            $("#d").val($(this).val()); // update the dropdown if clicked
        })
        .appendTo("#r"); // append to some visible place
});

$（“#d选项”）。每个（函数（i，e）{//获取选项
$（“”）/创建一个单选元素
.attr（“value”，$（this.val（））//设置值
.attr（“已检查”，i==0）//默认情况下检查第一个
.click（函数（）{//addevent）单击更新下拉列表
$（“#d”）.val（$（this.val（））；//如果单击，则更新下拉列表
})
.appendTo（“#r”）；//附加到某个可见的位置
});

为了将其封装到一个声明性属性中，我扩展了@BrunoLM的函数，用给定的CSS类将所有的样式设置为单选按钮外观

$("#d option").each(function(i, e) { // get the options
    $("<input type='radio' name='r' />") // create a radio element
        .attr("value", $(this).val()) // set the value
        .attr("checked", i == 0) // check the first by default
        .click(function () { // add event click which updates the dropdown
            $("#d").val($(this).val()); // update the dropdown if clicked
        })
        .appendTo("#r"); // append to some visible place
});

HTML JS

//http://stackoverflow.com/questions/3975331/update-drop-down-selection-with-radio-button-selection-using-jquery
// http://jsfiddle.net/ChinmayeeG/TkGP8/
$（函数（）{
$（'.radioSelect'）。每个（函数（selectIndex，selectElement）{
var select=$（selectElement）；
变量容器=$（“”）；
选择.after（容器）；
container.append（选择）；
select.find（'option'）。每个（函数（optionIndex，optionElement）{
var radioGroup=select.attr（'id'）+“Group”；
变量标签=$（“”）；
容器。附加（标签）；
$("")
.attr（“value”，$（this.val（））
//。单击（（函数（）{select.val（$（this.val（））；}））//无线电更新选择-请参阅下面的可选选项
.附录（标签）；
$（“”+$（this.val（）+“”）.appendTo（label）；
});
//http://stackoverflow.com/questions/4957207/how-to-check-uncheck-radio-button-on-click
//可选-此逻辑用于在单击已选中的收音机时取消选中
container.find（“：radio+span”）.mousedown(
职能（e）{
变量$span=$（本）；
var$radio=$span.prev（）；
如果（$radio.is（':checked'））{
var uncheck=function（）{
setTimeout（函数（）{$radio.prop（'checked'，false）；}，0）；
};
var unbind=函数（）{
$span.unbind（'mouseup'，up）；
};
var up=function（）{
取消选中（）；
解除绑定（）；
};
$span.bind（'mouseup'，up）；
$span.1（'mouseout'，解除绑定）；
}否则{
选择.val（$radio.val（））；
}
}
);
select.change（（函数（）{//select更新收音机
$（“输入[name=”+select.attr（'id'）+“组”+“]”][value=”+this.value+“]”）prop.prop（“选中”，true）；
}));
});
});

你能通过css隐藏下拉列表吗？是的，有很多ID/选择器可以使用，所以通过css隐藏应该没有问题。通过JavaScript可以隐藏下拉列表，为我们提供一段HTML…使用Shopp代码可以更简单地实现这一点嘿，非常感谢这个解决方案，我刚刚在这里发布了一个快速的故障排除跟进：你能帮我解决这个问题吗？非常酷。如果其中一个选择选项被禁用，有没有关于如何使其中一个单选按钮不可选择的提示？调整禁用的小提琴相当容易

/* http://jsfiddle.net/496c9/ */
.radioSelectContainer > select {
  display: none;
}

.radioSelectContainer > label {
  display: inline-block;
  margin: 0.3em 0.3em 0 0;
  background-color: #EFEFEF;
  border-radius: 4px;
  border: 1px solid #D0D0D0;
}

  .radioSelectContainer > label > span {
    padding: 0.2em;
    text-align: center;
    display: block;
    white-space: nowrap;
  }

  .radioSelectContainer > label > input {
    position: absolute;
    top: -20px;
  }

    .radioSelectContainer > label > input:checked + span {
      background-color: #404040;
      color: #F7F7F7;
    }

// http://stackoverflow.com/questions/3975331/update-drop-down-selection-with-radio-button-selection-using-jquery
// http://jsfiddle.net/ChinmayeeG/TkGP8/
$(function () {

  $('.radioSelect').each(function (selectIndex, selectElement) {

    var select = $(selectElement);
    var container = $("<div class='radioSelectContainer' />");
    select.after(container);
    container.append(select);

    select.find('option').each(function (optionIndex, optionElement) {
      var radioGroup = select.attr('id') + "Group";
      var label = $("<label />");
      container.append(label);

      $("<input type='radio' name='" + radioGroup + "' />")
          .attr("value", $(this).val())
          //.click((function () { select.val($(this).val()); })) //radio updates select - see optional below
          .appendTo(label);

      $("<span>" + $(this).val() + "</span>").appendTo(label);
    });

    //http://stackoverflow.com/questions/4957207/how-to-check-uncheck-radio-button-on-click
    //optional - this logic handles unchecking when clicking on an already checked radio
    container.find(":radio + span").mousedown(
      function (e) {
        var $span = $(this);
        var $radio = $span.prev();
        if ($radio.is(':checked')) {
          var uncheck = function() {
            setTimeout(function () { $radio.prop('checked', false); }, 0);
          };
          var unbind = function() {
            $span.unbind('mouseup', up);
          };
          var up = function() {
            uncheck();
            unbind();
          };
          $span.bind('mouseup', up);
          $span.one('mouseout', unbind);
        } else {
          select.val($radio.val());
        }
      }
    );

    select.change((function () { //select updates radio
      $("input[name='" + select.attr('id') + "Group" + "'][value='" + this.value + "']").prop("checked", true);
    }));
  });
});