网站群管理建设,政务网站的建设时期的概述,怎么判断公司是不是外包,设计一个网站需要多久效果如下:
几个注意地方: 1.多选下拉框需要添加 multiple 2.获取选中的元素KaTeX parse error: Expected EOF, got # at position 3: (#̲id option:selec…(#id option:not(:selected))
下面是代码的各个部分实现, 方便引用,最后是总体代码,方便理解
添加选中到右边:
// …效果如下:
几个注意地方: 1.多选下拉框需要添加 multiple 2.获取选中的元素KaTeX parse error: Expected EOF, got # at position 3: (#̲id option:selec…(#id option:not(:selected))
下面是代码的各个部分实现, 方便引用,最后是总体代码,方便理解
添加选中到右边:
// 添加选中到右边
$(#add).click((){let $options $(#select1 option:selected)let $remove $options.remove();$(#select2).append($remove);
})添加未选到右边:
// 添加未选到右边
$(#add_not).click((){let $options $(#select1 option:not(:selected))let $remove $options.remove();$(#select2).append($remove);
})全部添加到右边:
// 全部添加到右边
$(#add_all).click((){let $remove $(#select1 option).remove()$(#select2).append($remove);
})整体代码:
!DOCTYPE html
html
head
meta charsetutf-8
style.content{display: inline-block;margin-left:15px;}div span{display: block;margin-left:-15px;}#add,#add_all,#add_not,#remove,#remove_all,#remove_not{cursor: pointer;}#select1{width: 100px;height: 160px;}#select2{width:100px;height:160px;}/style
/head
bodydiv classcontentselect multiple idselect1option value1选项1/optionoption value2选项2/optionoption value3选项3/optionoption value4选项4/optionoption value5选项5/optionoption value6选项6/optionoption value7选项7/optionoption value8选项8/option/selectdivspan idadd选中添加到右边gt;gt;/spanspan idadd_not添加未选到右边gt;gt;/spanspan idadd_all全部添加到右边gt;gt;/span/div
/div
div classcontent stylemargin-left:30px;select multiple idselect2 /selectdivspan idremovelt;lt;选中删除到左边/spanspan idremove_notlt;lt;添加未选到左边/spanspan idremove_alllt;lt;全部删除到左边/span/div
/divscript srchttps://cdn.bootcss.com/jquery/3.4.1/jquery.js/script
script
$(function(){// 添加选中到右边$(#add).click((){let $options $(#select1 option:selected)let $remove $options.remove();$(#select2).append($remove);})// 添加未选到右边$(#add_not).click((){let $options $(#select1 option:not(:selected))let $remove $options.remove();$(#select2).append($remove);})// 全部添加到右边$(#add_all).click((){let $remove $(#select1 option).remove()$(#select2).append($remove);})// 删除选中到左边$(#remove).click((){let $options $(#select2 option:selected)let $remove $options.remove();$(#select1).append($remove);})// 删除未选到左边$(#remove_not).click((){let $options $(#select2 option:not(:selected))let $remove $options.remove();$(#select1).append($remove);})// 全部删除到左边$(#remove_all).click((){let $remove $(#select2 option)$(#select1).append($remove);})
})
/script/body
/html参考《锋利的jquery》P149~P151
