gpt4 book ai didi

javascript - 在不修改 HTML 的情况下将下拉列表转换为单选按钮

转载 作者:技术小花猫 更新时间:2023-10-29 11:47:11 25 4
gpt4 key购买 nike

所以这是一种特殊情况 - 我有一个插件,由于契约(Contract)原因我无法修改。它显示一组下拉列表,我需要它来显示一组单选按钮。是否有一种 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>

最佳答案

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

Here is a code example on jsFiddle.

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

关于javascript - 在不修改 HTML 的情况下将下拉列表转换为单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3974217/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com