我有一个下拉列表:
<select id="ContentList" name="ContentList">
<option value="">Please Select</option>
<option value="TEST_TOP">TEST TOP</option>
</select>
我有一个可排序的列表:
<ul id="sortable">
<li class="ui-state-default">First</li>
<li class="ui-state-default">Second</li>
<li class="ui-state-default">Third</li>
</ul>
我有一个按钮:
<input type="button" value="Add Section" id="btnAdd" class="button"/>
以下脚本:
<script type="text/javascript">
$(function() {
$("#sortable").sortable({
placeholder: 'ui-state-highlight'
});
$("#sortable").disableSelection();
$('#btnAdd').click(function() {
});
});
</script>
当用户在下拉列表中选择某些内容并单击“添加”时,我希望将其作为具有类属性等的<li>
发送到可排序列表,下拉列表现在显示“请选择”选项。
不确定采取的最佳方法。感谢
答案 0 :(得分:6)
$("#sortable").append("<li class='ui-state-default'>"+
$("#ContentList option:selected").text()+"</li>");
$("#ContentList option:selected").remove();
应该做的伎俩......(:
答案 1 :(得分:6)
工作演示here
$('#btnAdd').click(function() {
//cache sortable
var $sortable = $("#sortable");
//clone sortables first li, change the text to that of the
//chosen option and append it to the sortable this saves having
//html embedded within the js
$sortable.children().eq(0)
.clone()
.text( $('#ContentList').val() )
.appendTo( $sortable );
// cache select options
var $items = $('#ContentList').children();
//remove selected item
$items.filter(':selected').remove()
//set first option to be selected
$list.eq(0).attr('selected', true);
});