jQueryの動的ドロップダウンに静的オプションを追加する方法

Question

サービスのリストでドロップダウンを取得していますが、動的ドロップダウンリストで「サービスの選択」のような静的オプションをもう1つ追加する必要があります。

これは私のコードです：

if (data[0]) { 
    $('#SelectedServiceIds').html(""); 
    $.each(data, function (key, value) { 
     $('#SelectedServiceIds').append(
       $("<option></option>").attr("value", value.ServiceID).text(value.ServiceName)); 
    }); 
} 

そして、これが私のdiv要素である：どこへ行く

<div class="col-lg-3 col-sm-6"> 
    <div class="form-group select-services"> 

     <select class="form-control" name="SelectedServiceIds" id="SelectedServiceIds" placeholder="Choose Service"> 
      <option>Choose Service</option> 
     </select> 
    </div> 
</div> 

Answer 1

一つの方法は、単純にループの前に戻って、このオプションを追加（そしてあなたからそれを削除することがありあまりにもHTML）

if (data[0]) { 
    //Remove all options 
    $("#SelectedServiceIds").html(""); 

    //Add the static option 
    $("#SelectedServiceIds").append(
    $("<option></option>").attr("value", -1).text("Choose Service") 
); 

    //Add the dynamic options 
    $.each(data, function(key, value) { 
    $("#SelectedServiceIds").append(
     $("<option></option>") 
     .attr("value", value.ServiceID) 
     .text(value.ServiceName) 
    ); 
    }); 
} 

Answer 2

if (data[0]) { 
       $('#SelectedServiceIds').html(""); 
$('#SelectedServiceIds').append('<option value="0" selected="selected">Choose Service</option>'); 
       $.each(data, function (key, value) { 
       $('#SelectedServiceIds').append(
       $("<option></option>").attr("value", value.ServiceID).text(value.ServiceName)); 
          }); 

        } 

Answer 3

先頭に付加することができます

if (data[0]) { 
       $('#SelectedServiceIds').html(""); 

       $.each(data, function (key, value) { 
       $('#SelectedServiceIds').append(
       $("<option></option>").attr("value", value.ServiceID).text(value.ServiceName)); 
          }); 

$("#SelectedServiceIds").prepend($("<option></option>").attr("value", -1).text("Choose Service").attr("selected",true)); 

        } 

Answer 4

以下のようにテキストだけで、このようなループのbegning前に空のオプションを追加します。ブロックは、この行の$（「＃のSelectedServiceIds」）を交換する場合は、あなたに

if (data[0]) { 
    $('#SelectedServiceIds').html("<option value=''>Choose Service</option>"); 
    $.each(data, function (key, value) { 
     $('#SelectedServiceIds').append(
      $("<option></option>").attr("value", value.ServiceID).text(value.ServiceName)); 
    }); 

}