如何隐藏下拉列表以及如何从下拉列表中进行多选？

Posted 2023-03-14

【中文标题】如何隐藏下拉列表以及如何从下拉列表中进行多选？

【英文标题】：How to hide dropdown and how to multiselect from dropdown?

【发布时间】：2019-08-29 08:26:25

【问题描述】：

我有工作日的下拉列表，我想选择多天，例如“星期一”和“星期二”，我有几个问题

1) 如何隐藏多选下拉菜单？因为它显示了所有列表 2) 如何进行多选？我应该按住 CTRL 来进行多选吗？ 3) 如果我将它作为一个字符串放到同一列中，它将如何保存在数据库中，我的意思是它会像“MondayTuesday”、“Monday Tuesday”还是“Monday、Tuesday”一样

这是我的看法

        <div class="form-group">
            Form::label('weekdays', 'Week Days')

            Form::select('weekdays',$weekdays,null,array('name'=>'weekdays[]', 'multiple' => 'multiple'))
            Form::select('timetable',$time,null,array('name'=>'time[]'))
        </div>

控制器

        $categories_name = Category::pluck('category_name','id');    
        $data = array(
            'weekdays' => [
                'Monday',
                'Tuesday',
                'Wednesday'
            ],
            'time' => [
                '2p.m',
                '3p.m'
            ],
            'categories_name' => $categories_name
        );
        return view('pages.clubs.create_club')->with($data);
    

see the screenshot to understand what i mean

【问题讨论】：

对于第 1 点和第 2 点，您可以使用 jquery 多选插件，您不必为这种情况按住 CTRL 只需搜索并添加...现在第三点，您可以获得类别数组和通过这样做json_encode($request->get('categories))以longText形式存储到db中，然后在检索类别时这样做json_decode($key->categories)

【参考方案1】：

对于 1 和 2，您可以使用名为 chosen 的插件，它有很好的文档并且很容易实现。

对于第 3 个问题，您可以将其以 json 格式保存在数据库中，如下所示：

$days = "Monday,Tuesday,Wednesday"; 
//or $days = $request->weekdays;
$parsed = explode(",", $days);
$selected_weekdays = json_encode($parsed);

Model::create(['weekdays' => $selected_weekdays]);

然后您可以通过解码 json 字符串来显示刀片上的值，如下所示：

$selected_weekdays = json_decode($model->weekdays);

Form::select('weekdays[]',$weekdays,$selected_weekdays,array('multiple' => 'multiple'))

更新 1：

建议使用 bower 安装它：

bower install chosen

使用选择：

<link rel='stylesheet' type="text/css" href=" asset('bower_components/chosen/chosen.min.css') " rel="stylesheet">

Form::select('weekdays[]',$weekdays,$selected_weekdays,array('multiple' => 'multiple', 'class' => 'chosen-select'))

<script src=" asset('bower_components/chosen/chosen.jquery.min.js') "></script>

<script>
    $(".chosen-select").chosen();
</script>

【讨论】：

你能解释一下我应该如何在表格中声明选中吗？我已经使用composer安装了它，请告诉我如何制作它

@NurdauletShamilov - 请查看我关于如何使用选择的答案的更新