如何在下拉菜单中为第一个选项附加结束选项标签

Question

在这里，我正在从服务动态地将数据加载到下拉列表中，但是当数据加载到下拉列表中时，第一个子级没有</option>符，每个子级都具有</option>标记。

我正在尝试通过jQuery为第一个孩子添加结束符</option> 。 我该怎么做？

这是HTML的外观。

<select id="myDropDown">
  <option class="" value="LC">LC
  <option class="" value="LC1">LC1</option>
  <option class="" value="LC2">LC2</option>
</select>

这是我尝试过的。

$('#myDropDown').find('option').each(function(i){
  if(i!=0) 
    $(this).before('</option>');
});

Answer 1

在JS中执行此操作毫无意义，因为JS 在加载DOM 之后运行。 因此，浏览器的HTML渲染器将通过为您添加缺少的</option>来修复语法损坏的问题。

如果在DOM检查器中检查此代码段，您将看到我在说什么。 结束标记已为您添加：

 <select id="myDropDown"> <option class="" value="LC">LC <option class="" value="LC1">LC1</option> <option class="" value="LC2">LC2</option> </select> 

除此之外，这是不可能的，因为您只能将整个元素插入DOM中，而不能关闭标签。

如果您破坏了HTML，则需要在源头而不是通过JS对其进行修复。

Answer 2

   <select class="form-control" >
         <option selected disabled="disabled">select category</option>
              @foreach (var p in Model.Models)
                {
                <option value="@p.ID">@p.value</option>
                }
     </select>

如果您直接从服务器使用模型，请执行此操作

<select class="form-control" id="yourid" name="name">
   <option selected disabled>--Select Whatever--</option>
</select> 

然后在脚本中，如果您正在使用ajax调用来获取数据，请执行此操作以附加其他选项

$('#yourid').append('<option value=' + res.ID + '>' + res.Name + '</option>');