Question

我有一个片段，它基本上将select转换为DIV。

var selectName = jQuery('select').attr('name');

// add a hidden element with the same name as the select
var hidden = jQuery('<input type="hidden" name="' + selectName + '">');
hidden.val(jQuery('select').val());
hidden.insertAfter(jQuery('select'));

jQuery("select option").unwrap().each(function() {
    var btn = jQuery('<div class="btn">' + jQuery(this).text() + '</div>');
    if (jQuery(this).is(':checked')) btn.addClass('on');
    jQuery(this).replaceWith(btn);
});

jQuery(document).on('click', '.btn', function() {
    jQuery('.btn').removeClass('on');
    jQuery(this).addClass('on');
    jQuery('input[name="' + selectName + '"]').val(jQuery(this).text());
});

这很好用，唯一的问题是它将select选项的文本（点击时）作为值，而不是选择值本身。

因此，正常选择是：

value =＆＃34; 412 |退货价格＆＃34;＆gt;退货价格（60.00澳元）

更改为此JS后，它显示为：

值=＆＃34;退货价格（60.00澳元）＆＃34;

有关如何纠正这个问题的想法吗？

Answer 1

您可以将每个value的{{1}}保留在<option>属性中，并在更改隐藏输入时获取该值：

创建data-*时，添加具有正确值的<div>属性：

data-value

当您选择了$("select option").unwrap().each(function () { var btn = $('<div class="btn" data-value="' + $(this).val() + '">' + $(this).text() + '</div>'); if ($(this).is(':checked')) btn.addClass('on'); $(this).replaceWith(btn); });之一时，请调用该<div>值：

data-value

JSFiddle

将选择更改为DIV

1 个答案: