javascript - Select2 看起来不像它应该的那样

标签 javascript jquery html css jquery-select2

我想设置一个Select2 选择。为此,我遵循了 https://select2.org/getting-started/installation 上的说明。 .

但是,我的 Select2 选择看起来很糟糕......它看起来是这样的: Select2 dropdown menu

如果我不使用 jQuery $('#users').select2(); 将它转换为 Select2 选择,它看起来就像一个普通的选择。到目前为止,这是我的源代码:

@extends('layouts.dashboard')

@section('content')
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

    <div class="page-content-wrapper">
        <!-- BEGIN CONTENT BODY -->
        <div class="page-content" style="min-height: 1095px;">
            <!-- BEGIN PAGE HEADER-->
            <!-- BEGIN PAGE BAR -->
            <div class="page-bar">
                <ul class="page-breadcrumb">
                    <li>
                        <a href="dashboard">Dashboard</a>
                        <i class="fa fa-circle"></i>
                    </li>
                    <li>
                        <span>Kundendetails</span>
                    </li>
                </ul>
                <div class="page-toolbar">
                    <div class="pull-right btn btn-sm">
                        <i class="icon-calendar"></i>&nbsp;
                        <span class="thin uppercase hidden-xs">
                        @php
                            $carbon = \Carbon\Carbon::createFromTimestamp(time(), 'Europe/Berlin');
                            echo $carbon->copy()->formatLocalized('%d.%m.%Y');
                        @endphp
                    </span>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <h1 class="page-title"> Kundendetails
                        <small>Hier können Sie einzelne Kunden bearbeiten</small>
                    </h1>
                </div>

                <div class="col-md-6 v-center">
                    <div class="col-md-6 v-center">

                        <div class="form-group">
                            <label for="users">Select user</label>
                            <select name="user_id" id="users" class="form-control">
                                <option value="AL">Alabama</option>
                                <option value="WY">Wyoming</option>
                            </select>
                        </div>

                    </div>

                    <div class="col-md-6 v-center">
                        <button class="add-modal btn btn-success pull-right">
                            <span class="glyphicon glyphicon-plus"></span> Kunde hinzufügen
                        </button>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="portlet light bordered">
                        <div class="portlet-title tabbable-line">
                            <div class="caption caption-md">
                                <i class="icon-globe theme-font hide"></i>
                                <span class="caption-subject font-blue-madison bold uppercase">Kunde</span>
                            </div>
                            <ul class="nav nav-tabs">
                                <li class="active">
                                    <a href="#tab_1_1" data-toggle="tab">Kundeninformationen</a>
                                </li>
                            </ul>
                        </div>
                        <div class="portlet-body">
                            <div class="tab-content">
                                <!-- PERSONAL INFO TAB -->
                                <div class="tab-pane active" id="tab_1_1">
                                    <form role="form" action="#">
                                        <div class="form-group">
                                            <label class="control-label">First Name</label>
                                            <input type="text" placeholder="John" class="form-control"> </div>
                                        <div class="form-group">
                                            <label class="control-label">Last Name</label>
                                            <input type="text" placeholder="Doe" class="form-control"> </div>
                                        <div class="form-group">
                                            <label class="control-label">Mobile Number</label>
                                            <input type="text" placeholder="+1 646 580 DEMO (6284)" class="form-control"> </div>
                                        <div class="form-group">
                                            <label class="control-label">Interests</label>
                                            <input type="text" placeholder="Design, Web etc." class="form-control"> </div>
                                        <div class="form-group">
                                            <label class="control-label">Occupation</label>
                                            <input type="text" placeholder="Web Developer" class="form-control"> </div>
                                        <div class="form-group">
                                            <label class="control-label">About</label>
                                            <textarea class="form-control" rows="3" placeholder="We are KeenThemes!!!"></textarea>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label">Website Url</label>
                                            <input type="text" placeholder="http://www.mywebsite.com" class="form-control"> </div>
                                        <div class="margiv-top-10">
                                            <a href="javascript:;" class="btn green"> Änderungen speichern </a>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="portlet light portlet-fit bordered">


                        <div class="portlet-body">
                            <div id="client_overview_table_div" class="table-responsive">
                                <table class="table table-striped table-bordered" id="client_overview_table">
                                    <thead>
                                    <tr>
                                        <th class="text-center">#</th>
                                        <th class="text-center">Anrede</th>
                                        <th class="text-center">Titel</th>
                                        <th class="text-center">Vorname</th>
                                        <th class="text-center">Name</th>
                                        <th class="text-center">Firma</th>
                                        <th class="text-center">Straße</th>
                                        <th class="text-center">PLZ</th>
                                        <th class="text-center">Land</th>
                                        <th class="text-center">Ort</th>
                                        <th class="text-center">Telefon</th>
                                        <th class="text-center">Telefax</th>
                                        <th class="text-center">Mobil</th>
                                        <th class="text-center">E-Mail</th>
                                        <th class="text-center">Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @foreach($data as $item)
                                        <tr class="item{{$item->client_id}}">
                                            <td>{{$item->client_id}}</td>
                                            <td>{{$item->title}}</td>
                                            <td>{{$item->academic_title}}</td>
                                            <td>{{$item->first_name}}</td>
                                            <td>{{$item->last_name}}</td>
                                            <td>{{$item->company}}</td>
                                            <td>{{$item->street}}</td>
                                            <td>{{$item->zip}}</td>
                                            <td>{{$item->country}}</td>
                                            <td>{{$item->city}}</td>
                                            <td>{{$item->phone}}</td>
                                            <td>{{$item->fax}}</td>
                                            <td>{{$item->mobile}}</td>
                                            <td>{{$item->email}}</td>
                                            <td>
                                                <button class="edit-modal btn btn-info" data-info="#item{{$item->client_id}}_">
                                                    <span class="glyphicon glyphicon-edit"></span>
                                                </button>
                                                <button class="delete-modal btn btn-danger" data-info="#item{{$item->client_id}}_">
                                                    <span class="glyphicon glyphicon-trash"></span>
                                                </button>

                                                <input type="hidden" id="item{{$item->client_id}}_id" value="{{$item->client_id}}">
                                                <input type="hidden" id="item{{$item->client_id}}_title" value="{{$item->title}}">
                                                <input type="hidden" id="item{{$item->client_id}}_academic_title" value="{{$item->academic_title}}">
                                                <input type="hidden" id="item{{$item->client_id}}_first_name" value="{{$item->first_name}}">
                                                <input type="hidden" id="item{{$item->client_id}}_last_name" value="{{$item->last_name}}">
                                                <input type="hidden" id="item{{$item->client_id}}_company" value="{{$item->company}}">
                                                <input type="hidden" id="item{{$item->client_id}}_street" value="{{$item->street}}">
                                                <input type="hidden" id="item{{$item->client_id}}_zip" value="{{$item->zip}}">
                                                <input type="hidden" id="item{{$item->client_id}}_country" value="{{$item->country}}">
                                                <input type="hidden" id="item{{$item->client_id}}_city" value="{{$item->city}}">
                                                <input type="hidden" id="item{{$item->client_id}}_phone" value="{{$item->phone}}">
                                                <input type="hidden" id="item{{$item->client_id}}_fax" value="{{$item->fax}}">
                                                <input type="hidden" id="item{{$item->client_id}}_mobile" value="{{$item->mobile}}">
                                                <input type="hidden" id="item{{$item->client_id}}_email" value="{{$item->email}}">
                                                <input type="hidden" id="item{{$item->client_id}}_web" value="{{$item->web}}">
                                                <input type="hidden" id="item{{$item->client_id}}_mailbox" value="{{$item->mailbox}}">
                                                <input type="hidden" id="item{{$item->client_id}}_mailbox_country" value="{{$item->mailbox_country}}">
                                                <input type="hidden" id="item{{$item->client_id}}_mailbox_zip" value="{{$item->mailbox_zip}}">
                                                <input type="hidden" id="item{{$item->client_id}}_mailbox_city" value="{{$item->mailbox_city}}">
                                                <input type="hidden" id="item{{$item->client_id}}_birthday" value="{{$item->birthday}}">
                                                <input type="hidden" id="item{{$item->client_id}}_accounting_number" value="{{$item->client_accounting_id}}">
                                                <input type="hidden" id="item{{$item->client_id}}_comment" value="{{$item->client_comment}}">
                                                <input type="hidden" id="item{{$item->client_id}}_special_agreement" value="{{$item->client_special_agreement}}">
                                                <input type="hidden" id="item{{$item->client_id}}_bank" value="{{$item->account_bank}}">
                                                <input type="hidden" id="item{{$item->client_id}}_bank_code" value="{{$item->account_bank_code}}">
                                                <input type="hidden" id="item{{$item->client_id}}_account_number" value="{{$item->account_account_number}}">
                                                <input type="hidden" id="item{{$item->client_id}}_iban" value="{{$item->account_iban}}">
                                                <input type="hidden" id="item{{$item->client_id}}_account_holder" value="{{$item->account_account_holder}}">
                                                <input type="hidden" id="item{{$item->client_id}}_account_comment" value="{{$item->account_comment}}">
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

我在控制台中也没有收到任何错误...顺便说一句,我也在使用引导 CSS。有人可以帮助我,告诉我是什么导致了这个问题,我该如何解决?

亲切的问候和谢谢!

最佳答案

您的代码似乎没问题。

你说“如果我不使用 jQuery $('#users').select2(); 将它转换为 Select2 选择,它看起来就像一个普通的选择”......

没看到

$( document ).ready(function() {
    $('#users').select2();
}); 

在你的代码中(包括 jquery)

您是否在页面末尾启动 select=>select2 转换?

对我来说,你的设计并不奇怪,你可以添加一个 style="width:300px"例如放大你的菜单。 您还可以更改 select2 设计,使其具有与“选择”的其他并发库类似的设计,例如:http://jsfiddle.net/sebmade/HRkBq/

关于javascript - Select2 看起来不像它应该的那样,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51116112/

相关文章:

javascript:将带有特殊字符的参数传递给函数而不被替换

javascript - 在 Node.js 中设置 cookie 值

javascript - WebGL 为许多相同的对象计算 GPU 上的顶点?

html - 如何在没有JS的情况下将 "number-parent"类div的高度设置为等于 "active-lg"类div

javascript - 使用 AngularJS 将 HTML 表格导出到 Excel

jquery - 扩展 Bootstrap 选择插件

javascript - jquery 与 socket.io 错误

javascript - 如何在文本框上显示日历点击html

javascript - 为什么 react 中表单数据没有保存到本地存储?

html - 在 HTML5 Canvas 中屏蔽形状?