美文网首页
获取表单中multiple select的输入数据

获取表单中multiple select的输入数据

作者: _孙小胖 | 来源:发表于2018-11-06 17:58 被阅读0次

multiple select元素支持选中多个option,如何获取选中的多个值

<!--未订正代码-->
<form action="">
    <label for="">
        高级搜索:
        <select name="id_sp" id="include" multiple="multiple" required>
            @foreach($sp as $v)
                <option value="{{$v['id']}}">{{$v['simple_name']}}</option>
            @endforeach
        </select>
    </label>
    <label for="">
        <select name="" id="uninclude" multiple="multiple" required>>
            <option value="">网易音乐</option>
            <option value="">酷狗音乐</option>
            <option value="">酷我音乐</option>
        </select>
    </label>
    <button type="submit" class="shaixuan">筛选</button>
</form>

如果select的name属性写成上面的形式或者是空,表单提交的值将会是选中的最后一个option。

{
    "id_sp" : "3"
}
<!--订正后的代码-->
<form action="">
    <label for="">
        高级搜索:
        <select name="in_sp[]" id="include" multiple="multiple" required>
            @foreach($sp as $v)
                <option value="{{$v['id']}}">{{$v['simple_name']}}</option>
            @endforeach
        </select>
    </label>
    <label for="">
        <img src="../../../images/icon/连接.png" alt="" class="lianjie">
        <select name="not_sp[]" id="uninclude" multiple="multiple" required>>
            @foreach($sp as $v)
                <option value="{{$v['id']}}">{{$v['simple_name']}}</option>
            @endforeach
        </select>
    </label>
    <button type="submit" class="shaixuan">筛选</button>
</form>

替换后表单数据
[图片上传失败...(image-eaaf4-1541498305280)]

相关文章

  • 获取表单中multiple select的输入数据

    multiple select元素支持选中多个option,如何获取选中的多个值 如果select的name属性写...

  • 如何获取表单中multiple select的值

    最近在选择框中使用了bootstrap的搜索选择框,在使用multiple select框时,后端获取不到数据 后...

  • Vue快速入门(二)

    双向数据绑定双向数据绑定一般发生在input、select、textarea这些表单元素中,当接收到输入值后,其他...

  • Jquery Select2 使用总结

    ** 1. �select2 一些设置** ** 2. 获取 select 的值, 多选 multiple 和单选...

  • html5 表单元素

    1 表单元素作用:表示用于获取影虎输入的数据(1)form 设置html表单 提交 属性action:表示表单...

  • 标签-表单

    表单是网页搜集用户输入信息的最常见方式 表单的组成: 外壳 form 表单输入 input 选择列表 select...

  • DQL 针对数据行的查询语句

    select 作用:获取MySQL中的数据行 单独使用select: select @@xxx 查询参数信...

  • day04

    一、SELECT 1.1、作用 获取MySQL中的数据行 1.2、单独使用select 1.2.1 select ...

  • 「整理」Web 端设计规范-Input与Select

    今天主要总结下表单里的input输入框与select选择框,在总结之前,我们先来了解一下表单。 表单主要负责数据采...

  • HTML与CSS之注册表单

    1.form标签用于创建供用户输入的 HTML 表单 2.input可以在其中输入数据 3.select创建一个下...

网友评论

      本文标题:获取表单中multiple select的输入数据

      本文链接:https://www.haomeiwen.com/subject/qtmuxqtx.html