jQuery在选择框中添加空白选项字段

Question

我有以下适用于两个选择字段的 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>

Answer 1

首先创建空选项，然后使用.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);
    });
});    

Answer 2

只需使用 jquery 的 prepend() 在顶部添加一个选项。

$('#select2').prepend('<option value="">');

Answer 3

如果您想在开头添加空白选项并默认选择它，请使用以下代码：

$("#id").prepend("<option value=' ' selected='selected'></option>");

prepend将选项添加到顶部， selected='selected'将使其被选中。 由于value=' ' ，因此，它是空值选项。

如果您只想添加空白选项并且不想默认选择它，请使用以下代码：

$("#id").append("<option value=' ' ></option>");

Answer 4

如果您使用 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>