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 =＆＃34; select2＆＃34;在顶部加载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>");

前置会将选项添加到顶部，并且 selected ='selected'将其选中。由于 value =''，因此它是空白值选项。

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

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

Answer 4

如果使用form :: 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在选择框中添加空白选项字段

4 个答案: