應該如何在jQuery的動態下拉列表中添加靜態選項

Question

我正在下載服務列表，但我需要在動態下拉列表中添加一個靜態選項，如“選擇服務”。

這是我的代碼：

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

只需在循環開始之前添加一個空選項，如下所示：

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

}