应该如何在jQuery的动态下拉列表中添加静态选项

Question

I am getting dropdown with list of services but I need to add one more option static like "Choose Service" in the dynamic dropdown list.

This is my code:

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

And this is my 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

One way to go, simply add this option back before the loop (and you may remove it from the html too)

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

can prepend text as below

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

Just add an empty option before the begning of the loop like this :

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

}