Question

当我点击select标签时，我想删除select标签的第一个选项。这可能吗？

example image

我不希望在点击后看到第一个选项。

感谢您的帮助。

Answer 1

如果您在选择中使用bootstrap添加占位符属性。

如果你没有

<select required>
    <option value="" disabled selected>Select your option</option>
    <option value="1">1</option>
</select>

Answer 2

您可以使用jQuery删除第一个选项。

$(document).on('click', 'select', function() {
   $(this).find('option').get(0).remove();
});

这只是在点击时删除了选择标记的第一个选项。您需要添加一个if语句来检查它是否已被删除。

Answer 3

还有一个简单的无JavaScript解决方案：

＆＃13;

<select>
    <option style="display: none">--Choose--</option>
    <option>Cheese Cake</option>
    <option>Hot Pockets</option>
    <option>Sausage</option>
    <option>Cookies</option>
    <option>Bacon</option>
</select>

＆＃13;

（复制自@ chipChocolate.py的评论）

Answer 4

// to remove first...
    document.getElementById("element_id_str").options[0].remove();

//to remove the lot...
    document.getElementById("element_id_str").options.length = 0;

Answer 5

这是一种非常天真的方式：

$("#selector").change(function(evt) { //listen to changes of selection
  var theElement = $(this);
  if (!theElement.data("selected")) { //check if flag is not set
    theElement.children("option")[0].remove(); //remove 1st child
    theElement.data("selected", true); //set flag, so it doesn't continue removing items for every change
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selector">
  <option>--Choose--</option>
  <option>Apple</option>
  <option>Banana</option>
  <option>Papaya</option>
</select>

Answer 6

如果要删除第一个选项，请使用此

$(document).ready(function()
    {
       $("select").children().first().remove();           
    });

如果要在单击选择框后删除第一个选项，请使用此

$(document).ready(function()
{
    var removed=false;       
    $(document).on("click","select",function()
    {
        if(!removed)
        {
            $(this).children().first().remove();
            removed=true;
        }


    });
});

Answer 7

可能您只想要这个：

<select required>
    <option value="" hidden>Select your option</option>
    <option value="1">1</option>
</select>

Answer 8

Javascript：

document.getElementById("SelectId")[0].remove();

获取选择中的第一个选项并将其删除。

Answer 9

我遇到了同样的问题，但是以上解决方案仅适用于一种形式，不适用于多种形式。我添加了一些额外的代码，以便在您的表单中对其进行验证：

$(document).ready(function()
{
    $(document).on("change","select",function()
    {
        var x =    $(this).children().first().attr("name");
        var n = x.localeCompare("todelete");

        if (n == 0)
            $(this).children().first().remove();
    });
});

其中“ todelete”是

中定义的所有第一个元素[0]的名称。

请选择值//所有第一个elem必须具有相同的名称

“> //其他人的其他名字（可以是同一名字，但不能“ todelete”）

Answer 10

<select required>
    <option value="" disabled selected hidden>Select your option</option>
    <option value="1">1</option>
</select>

Answer 11

您需要 id 或 class 才能删除项目。在测试和调试时，我发现 'option:first' 无法删除该项目。但是 'option:first-of-type' 总能奏效。您可以获得有关“first-of-type”的更多信息here :first-of-type

$("#ID_or_.CLASS option:first-of-type").remove();

删除第一个选择选项

11 个答案: