使用 div 代替 select答案

【问题标题】：Using div's instead of select's使用 div 代替 select
【发布时间】：2013-11-17 17:58:26
【问题描述】：

您好，我已经按照以下说明实现了自定义选择：

http://www.onextrapixel.com/2012/06/20/create-a-custom-select-box-with-jquery/

它基于使用 div 和 span 而不是 select 和 option。我的问题是，我怎样才能让表单获得这个值？

我是否需要每次都进行隐藏选择并为其分配 div-select 值？

【问题讨论】：

隐藏的输入是要走的路。
你可以设置属性像 option1

标签： javascript jquery html forms select

【解决方案1】：

您可以使用与所选值匹配的隐藏选择，或者仅使用具有更新值的隐藏输入。无论哪种方式，要包含在表单提交中，它必须是input、textarea 或带有name 属性的select。

【讨论】：

【解决方案2】：

在表单的某处添加一个隐藏的输入，比如说

<input type="hidden" name="foo">

然后将这一行添加到jQuery sn -p

$(this).find('span.selectOption').click(function(){
    $(this).parent().css('display','none');
    $(this).closest('div.selectBox').attr('value',$(this).attr('value'));
    $(this).parent().siblings('span.selected').html($(this).html());

    $('input[name="foo"]').val($(this).html());
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
});

基本上，每当单击一个选项时，它都会更新名为“foo”的字段，该字段存储所选选项的名称。

【讨论】：

谢谢，这是我的想法，我想确保它是必要的。顺便说一句，如果有人使用它并希望在没有点击其他人的情况下传递“默认值”，那么只需将该行添加到 jQuery sn-p 的开头