Select2出现不应该
我要设置一个Select2选择。为此，我遵循了https://select2.org/getting-started/installation上的说明。
但是，我的Select2选择看起来很糟糕……看起来是这样的：
如果我不使用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>
<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
我在控制台中也没有收到任何错误...顺便说一句，我也在使用bootstrap CSS。有人可以帮我一下，告诉我是什么引起了这个问题以及如何解决这个问题？
致以问候，谢谢！
1 个答案:
答案 0 :(得分：0)
您的代码似乎还可以。
您说“如果不使用jQuery $（'＃users'）。select2（）;转换为Select2选择，它看起来就像是普通选择” ...
我看不到
$( document ).ready(function() {
$('#users').select2();
});
在您的代码中（包括jquery）
您是否在页面末尾启动select => select2转换？
对我来说，您的设计并不奇怪，您可以添加例如style =“ width：300px”来放大菜单。 您还可以更改select2设计，使其具有与其他并发库“选择”相似的设计，例如：http://jsfiddle.net/sebmade/HRkBq/
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？