jquery 怎样获取select多选下拉框所有选项的值

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery 怎样获取select多选下拉框所有选项的值相关的知识,希望对你有一定的参考价值。

jquery 获取select多选下拉框所有选项的值可以如下实现:

var all = "";
$("select option").each(function() 
    all += $(this).attr("value")+" ";
);

而值获取被选中的值可用如下代码实现

$("select").val();

下面给出实例代码:

创建html元素:一个多选列表和一个按钮

<select id="multi-sel" multiple="multiple">
    <option value="1">萝卜,我的value是1</option>
    <option value="2">青菜,我的value是2</option>
    <option value="3">小葱,我的value是3</option>
    <option value="4">豆腐,我的value是4</option>
</select>
<input type="button" value="点击显示选择的项目">

简单设置一下css样式

selectwidth:200px;height:150px;padding:10px;border:4px dashed #ccc;
select optionmargin:5px;
input[type=\'button\']width:200px;height:35px;margin:10px;border:2px dashed #ebbcbe;

编写jquery代码:实现获取所有值和获取选中值

$(function()
    $("input:button").click(function() 
        var all = "";
        $("select option").each(function() 
            all += $(this).attr("value")+" ";
        );
        var sel = $("select").val();
        alert("多选列表所有的value值:"+all+",其中被选中的是:"+sel+"。");
    );
)
参考技术A

获得所有选中的值可以参见下面代码:

jQuery("#select1  option:selected").text();

根据自己的需要修改#select1的值即可。如果不需要选中而只是获得所有的值,那把:selected去掉即可。

求jquery版的多选树形下拉框的插件(Multiple ComboTree)?

求jquery版的多选树形下拉框的插件,
不要EasyUI的
可以是已经集成ztree或wdTree的demo

第一步,创建静态页面select.html,引入select2相关的css和js文件,并引入jQuery核心js,如下图所示:

第二步,在body标签内插入select元素,设置属性multiple和class,宽度为300px,如下图所示:

第三步,初始化select2插件,需要调用select2()方法,如下图所示:

第四步,为了演示获取下拉框值,这里利用button按钮点击事件,在select下方插入一个button按钮,如下图所示:

5
第五步,编写按钮点击事件,事件里获取多选下拉框值和文本内容,如下图所示:

6
第六步,在浏览器中进行预览,点击“取值”按钮,会看到打印下拉框选择的值和文字,如下图所示:
参考技术A layui树形组件,topjui的数据表格 都行

以上是关于jquery 怎样获取select多选下拉框所有选项的值的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 多选下拉框插件

select2的多选下拉框上传

如何使select2插件下拉框多选并获取选中的值

jquery.multiselect.js 实现下拉框多选怎么设置默认全部选中下拉框的值,

用jquery实现可输入多选下拉组合框

bootstrap-select 插件多选下拉框提交时为啥还是只提交一个值?