[英]jQuery adding blank option field in the select box
我有以下適用於兩個選擇字段的 jquery 代碼。
$(document).ready(function () {
$("#select1").change(function(){
$('#trblock').fadeIn();
if ($(this).data('options') == undefined) {
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
});
但是,我希望 id="select2" 的第二個選擇框在頂部加載 1 個額外的空白選項。 我嘗試簡單地添加 HTML 部分,但我認為由於上面的 jQuery 代碼效果不允許它。 所以我認為修改 jQuery 部分將完成任務。 但我有一個 jQuery 新手。 請幫我如何得到它。
在 HTML 中是這樣的。
<select name="" id="select2">
<option value=""></option> // I want this here (by changing/adding codes in jquery)
<option value="1" date="01">Value 1</option>
<option value="2" date="02">Value 2</option>
<option value="3" date="03">Value 3</option>
<option value="4" date="04">Value 4</option>
<option value="5" date="05">Value 5</option>
</select>
首先創建空選項,然后使用.append()
添加其余選項
$(document).ready(function () {
$("#select1").change(function(){
$('#trblock').fadeIn();
if ($(this).data('options') == undefined) {
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html('<option value="">').append(options);
});
});
只需使用 jquery 的 prepend() 在頂部添加一個選項。
$('#select2').prepend('<option value="">');
如果您想在開頭添加空白選項並默認選擇它,請使用以下代碼:
$("#id").prepend("<option value=' ' selected='selected'></option>");
prepend將選項添加到頂部, selected='selected'將使其被選中。 由於value=' ' ,因此,它是空值選項。
如果您只想添加空白選項並且不想默認選擇它,請使用以下代碼:
$("#id").append("<option value=' ' ></option>");
如果您使用 form::select 然后使用此內聯 [''=>'--- Select Subject - --']+$subjects
$('#subject').select2({ placeholder: "Select Subject...", });
<div class="col-md-6" id ='subjectDiv'> <div class="mb-3"> <div class="form-group"> {!! Form::label('subject', '* Subject:') !!} {!! Form::select('subject', [''=>'--- Select Subject - --']+$subjects, null, ['required' => true, 'class' => 'form-control', 'id'=>'subject'])!!} @if ($errors->has('subject')) <span class="text-danger">{!! $errors-> first('subject') !!}</span> @endif <small id="" class="form-text text-muted"></small> </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.