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

Question

我有以下 jquery 代码可用于两个 select 字段。

$(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);
    });
});

但是我希望第二个 select 框的 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

如果你想在开头添加空白选项，默认情况下 select，请使用以下代码：

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

prepend 会将选项添加到顶部，selected='selected' 将使它 select编辑。由于value=' '，所以，它是空值选项。

如果您只想添加空白选项而不想 select 默认情况下使用以下代码：

$("#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>

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

jQuery adding blank option field in the select box

html

javascript

jquery