在laravel 5.8 / Bootstrap v4.1.2(/ jquery jQuery v3.3.1应用程序中,我使用的是Chosen版本1.8.7,我需要打开对话框模式 有几行和文本/选择输入。最后选择一项,我要选择它,因为它可以搜索搜索功能。 我喜欢:
var href = '/admin/show-todo-page';
$.ajax(
{
type: "GET",
dataType: "json",
url: href,
success: function (response) {
$("#div_show_todo_page_modal").modal({
"backdrop": "static",
"keyboard": true,
"show": true
});
$('#div_show_todo_page_content').html(response.html)
$(".chosen_select_box").chosen({
disable_search_threshold: 10,
no_results_text: "Nothing found!",
allow_single_deselect: true,
});
response.html具有如下代码:
<form role="form" autocomplete="off">
<div class="row entry input-group-append m-0 p-0" style="width: 100%;">
<div class=" col-12 p-1">
<input type="hidden" id="todo_id_0" name="todo_id_0" value="1" class="todo_editable_field todo_editable_field_id">
<input type="hidden" id="todo_modified_0" name="todo_modified_0" value="" class="todo_editable_field
todo_editable_field_modified">
<input class="form-control todo_editable_field todo_editable_field_text editable_field"
value="Write user's on using frontend application part lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
id="todo_text_0" name="todo_text_0" type="text" maxlength="255" autocomplete="off" placeholder="Enter new todo task"
onchange="javascript:backendFooter.todoOnChange(this); ">
</div>
<div class=" col-3 p-1 m-0 mb-4">
<select class="form-control todo_editable_field editable_field" id="todo_priority_0" name="todo_priority_0" data-placeholder=" -Select Is Featured- "
onchange="javascript:backendFooter.todoOnChange(this); ">
<option value="" label=" -Select Priority- "></option>
<option value="1">No</option>
<option value="2">Low</option>
<option value="3">Normal</option>
<option value="4" selected="">High</option>
<option value="5">Urgent</option>
<option value="6">Immediate</option>
</select>
</div>
<div class=" col-3 p-1">
<select class="form-control todo_editable_field todo_editable_field_completed editable_field" id="todo_completed_0" name="todo_completed_0"
data-placeholder=" -Select Is Featured- " onchange="javascript:backendFooter.todoOnChange(this); ">
<option value="" label=" -Select Completed- "></option>
<option value="1">Completed</option>
<option value="0" selected="">Opened</option>
</select>
</div>
<div class=" col-5 p-1">
<select class="form-control chosen_select_box todo_editable_field todo_editable_field_foruserid editable_field" id="todo_foruserid_0" name="todo_foruserid_0"
data-placeholder=" -Select User- " onchange="javascript:backendFooter.todoOnChange(this); " style="display: none;">
<option value="" label=" -Select User- "></option>
... long list ...
<option value="5" selected="">Admin ( Soang Soang, admin@mail.com )</option>
</select>
<div class="chosen-container chosen-container-single" title="" id="todo_foruserid_0_chosen" style="width: 0px;"><a class="chosen-single chosen-single-with-deselect">
<span>Admin ( Soang Soang, admin@mail.com )</span><abbr class="search-choice-close"></abbr>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input class="chosen-search-input" type="text" autocomplete="off">
</div>
<ul class="chosen-results"></ul>
</div>
</div>
</div>
<div class=" col-1 p-1">
<span class="input-group-append-btn">
<button class="btn btn-danger todo-btn-add" type="button">
<span class="fa fa-minus"></span>
</button>
</span>
</div>
</div>
<div class="row entry input-group-append m-0 p-0" style="width: 100%;">
<div class=" col-12 p-1">
<input type="hidden" id="todo_id_1" name="todo_id_1" value="3" class="todo_editable_field todo_editable_field_id">
<input type="hidden" id="todo_modified_1" name="todo_modified_1" value="" class="todo_editable_field
todo_editable_field_modified">
<input class="form-control todo_editable_field todo_editable_field_text editable_field"
value="Prepare list of user's having access to backend part lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut..."
id="todo_text_1" name="todo_text_1" type="text" maxlength="255" autocomplete="off" placeholder="Enter new todo task"
onchange="javascript:backendFooter.todoOnChange(this); ">
</div>
<div class=" col-3 p-1 m-0 mb-4">
<select class="form-control todo_editable_field editable_field" id="todo_priority_1" name="todo_priority_1" data-placeholder=" -Select Is Featured- "
onchange="javascript:backendFooter.todoOnChange(this); ">
<option value="" label=" -Select Priority- "></option>
<option value="1">No</option>
<option value="2" selected="">Low</option>
<option value="3">Normal</option>
<option value="4">High</option>
<option value="5">Urgent</option>
<option value="6">Immediate</option>
</select>
</div>
<div class=" col-3 p-1">
<select class="form-control todo_editable_field todo_editable_field_completed editable_field" id="todo_completed_1" name="todo_completed_1"
data-placeholder=" -Select Is Featured- " onchange="javascript:backendFooter.todoOnChange(this); ">
<option value="" label=" -Select Completed- "></option>
<option value="1">Completed</option>
<option value="0" selected="">Opened</option>
</select>
</div>
<div class=" col-5 p-1">
<select class="form-control chosen_select_box todo_editable_field todo_editable_field_foruserid editable_field" id="todo_foruserid_1" name="todo_foruserid_1"
data-placeholder=" -Select User- " onchange="javascript:backendFooter.todoOnChange(this); " style="display: none;">
<option value="" label=" -Select User- "></option>
... long list ...
<option value="5">Admin ( Soang Soang, admin@mail.com )</option>
</select>
<div class="chosen-container chosen-container-single" title="" id="todo_foruserid_1_chosen" style="width: 0px;"><a class="chosen-single chosen-single-with-deselect">
<span>Martha Lang ( Lang Lang, nilovsergey@ukr.net )</span><abbr class="search-choice-close"></abbr>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input class="chosen-search-input" type="text" autocomplete="off">
</div>
<ul class="chosen-results"></ul>
</div>
</div>
</div>
<div class=" col-1 p-1">
<span class="input-group-append-btn">
<button class="btn btn-danger todo-btn-add" type="button">
<span class="fa fa-minus"></span>
</button>
</span>
</div>
</div>
<div class="row entry input-group-append m-0 p-0" style="width: 100%;">
<div class=" col-12 p-1">
<input type="hidden" id="todo_id_2" name="todo_id_2" value="2" class="todo_editable_field todo_editable_field_id">
<input type="hidden" id="todo_modified_2" name="todo_modified_2" value="" class="todo_editable_field
todo_editable_field_modified">
<input class="form-control todo_editable_field todo_editable_field_text editable_field" value="To do line 2..." id="todo_text_2" name="todo_text_2" type="text"
maxlength="255" autocomplete="off" placeholder="Enter new todo task" onchange="javascript:backendFooter.todoOnChange(this); ">
</div>
<div class=" col-3 p-1 m-0 mb-4">
<select class="form-control todo_editable_field editable_field" id="todo_priority_2" name="todo_priority_2" data-placeholder=" -Select Is Featured- "
onchange="javascript:backendFooter.todoOnChange(this); ">
<option value="" label=" -Select Priority- "></option>
<option value="1">No</option>
<option value="2">Low</option>
<option value="3" selected="">Normal</option>
<option value="4">High</option>
<option value="5">Urgent</option>
<option value="6">Immediate</option>
</select>
</div>
<div class=" col-3 p-1">
<select class="form-control todo_editable_field todo_editable_field_completed editable_field" id="todo_completed_2" name="todo_completed_2"
data-placeholder=" -Select Is Featured- " onchange="javascript:backendFooter.todoOnChange(this); ">
<option value="" label=" -Select Completed- "></option>
<option value="1" selected="">Completed</option>
<option value="0">Opened</option>
</select>
</div>
<div class=" col-5 p-1">
<select class="form-control chosen_select_box todo_editable_field todo_editable_field_foruserid editable_field" id="todo_foruserid_2" name="todo_foruserid_2"
data-placeholder=" -Select User- " onchange="javascript:backendFooter.todoOnChange(this); " style="display: none;">
<option value="" label=" -Select User- "></option>
... long list ...
<option value="5" selected="">Admin ( Soang Soang, admin@mail.com )</option>
</select>
<div class="chosen-container chosen-container-single" title="" id="todo_foruserid_2_chosen" style="width: 0px;"><a class="chosen-single chosen-single-with-deselect">
<span>Admin ( Soang Soang, admin@mail.com )</span><abbr class="search-choice-close"></abbr>
<div><b></b></div>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input class="chosen-search-input" type="text" autocomplete="off">
</div>
<ul class="chosen-results">
<li class="active-result" data-option-array-index="1">yolanda_konopelski ( Konopelski Konopelski, yolanda.konopelski@homenick.org )</li>
... long list ...
<li class="active-result result-selected" data-option-array-index="41">Admin ( Soang Soang, admin@mail.com )</li>
</ul>
</div>
</div>
</div>
<div class=" col-1 p-1">
<span class="input-group-append-btn">
<button class="btn btn-success todo-btn-add" type="button">
<span class="fa fa-plus"></span>
</button>
</span>
</div>
</div>
</form>
其中id为“ todo_foruserid_N”的select具有“ chosen_select_box”类,并且所选功能已附加到该类。 但是在对话框表格a上,我看到非常糟糕的选择输入,例如https://imgur.com/a/aU45B5s 如果在选择中不使用selected_select_box类,则将其呈现为普通选择输入,但没有搜索功能?
如何解决?
修改后的块: 我通过https://www.votes.nilov-sergey-demo-apps.tk/admin/dashboard网址在线上传了此部分 您可以在模拟信用证下登录系统:投票_demo@votes.com / 654321 打开仪表板页面时,将弹出对话框。