javascript - 使用 div 代替 select

Question

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

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

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

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

Answer 1

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

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

然后将此行添加到 jQuery 代码段

$(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”的字段，该字段存储所选选项的名称。

Answer 2

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