将列表转换一个选择使用jQuery

我想下面的列表转换成一个选择列表，因此它可以通过表单提交 - 列表中的元素将成为每个选项的值：将列表转换一个选择使用jQuery

<ul class="selected connected-list ui-sortable" style="height: 279px;"> 
<li class="ui-helper-hidden-accessible" style=""></li> 
<li title="Owner Name 1 - " class="ui-state-default ui-element ui-draggable" style="display: block; position: relative; top: 0px; left: 0px;"><span class="ui-icon-arrowthick-2-n-s ui-icon"></span>Owner Name 1 - <em class="thenumber">4.4796E+11</em><a class="action" href="#"><span class="ui-corner-all ui-icon ui-icon-minus"></span></a></li> 
<li title="David Moffat - " class="ui-state-default ui-element" style="display: block; position: relative; top: 0px; left: 0px;"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>David Moffat - <em class="thenumber">07730423005</em><a class="action" href="#"><span class="ui-corner-all ui-icon ui-icon-minus"></span></a></li> 
</ul>

这应该转换成以下格式：

<select style="display:none" class="selectoption" name="p_num[]" multiple="multiple"> 
<option value="">4.4796E+11</option> 
<option value="">07730423007</option> 
</select>

我曾尝试以下的jQuery代码，但几个小时后，我拉我的头发：

$('a.sendform').click(function(){ 
$('ul.selected').each(function() { 
    var $select = $('<select />'); 

    $(this).find('li').each(function() { 
    var $option = $('<option />'); 
    $option.attr('value', $(this).('em')).html($(this).html()); 
    $select.append($option); 
    }); 
    $(this).replaceWith($select); 
}); 
});

任何帮助可能会挽救我剩余的头发。

非常感谢

大卫

来源

2010-04-17 Davemof

$('a.sendform').click(function() { 
    var $select = $('<select style="display:none" class="selectoption" name="p_num[]" multiple="multiple" />'); 
    $('li em').each(function(i, el) { 
     $select.append('<option value="">' + $(el).text() + '</option>'); 
    }); 
    $(this).replaceWith($select); 
    return false; 
});

由于选择是隐藏的（display:none），你可能看不到它在实际更换锚标记。

来源

2010-04-17 08:09:44

哇 - 你是一个明星！这是完美的 – Davemof 2010-04-17 08:16:53

这是“地图”方法的完美用法。

$(".connected-list > li:has(em)").map(function(index,elem){ 
    return $("<option/>").attr("value","").html($("em", $(elem)).html()); 
}).appendTo('.selectoption');

jQuery Map API Page

来源

2010-04-17 11:02:48 CPettit

将列表转换一个选择使用jQuery

回答

相关问题