I have the following jquery code that is working for two select fields.
$(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);
});
});
However I want the second select box having id="select2" to be loaded with 1 extra blank option at the top. I tried simply adding the HTML part but I think that due to the jQuery code effect above its not allowing it. So I think modifying the jQuery part instead will do the task. But I have a newbie to jQuery. Please help me how to get it.
Something like this in 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>
First create the empty option, then add the rest with .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="">');
If you wanna add the blank option in the starting and select it by default, use below code:
$("#id").prepend("<option value=' ' selected='selected'></option>");
prepend will add the option to top and selected='selected' will make it selected. As value=' ' , so, it is blank value option.
If you wanna just add the blank option and don't wanna select it by default then use below code:
$("#id").append("<option value=' ' ></option>");
The best way to do this if you are using form::select then use this inline [''=>'--- 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.