如何使用javascript或jquery从选择框选项的第一个选项中清空一个值？答案

【问题标题】：How to empty a value from the first option of a select box option using javascript or jquery?如何使用javascript或jquery从选择框选项的第一个选项中清空一个值？
【发布时间】：2019-08-23 12:12:36
【问题描述】：

这是我的代码。是否可以使用 jquery/javascript 清空第一个选项的值？

<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>

所以会变成这样：

<option value="">Select category</option>

我已经知道我可以通过定位它的值来删除整个第一个选项

$("#select_1 option[value='0']").remove();

【问题讨论】：

你做这个是为了回答你自己的问题吗？
不，我会删除我的答案，因为它可以部分解决问题。检查下面...我会添加评论。
根据您的问题，我认为您提供的答案可以实现您想要的，您提供的答案有什么问题？
问题是如果等于零（value="0"），我的代码将清空该值。我想要的是清空第一个选项的值，无论该值是 0 还是其他值。

标签： javascript jquery

【解决方案1】：

您可以使用纯 javascript 来使用 .options 获取选择元素的第一个选项，就像这样，它返回一个索引集合，因此您可以使用基于零的索引来获取第一个选项并设置它的 value 属性：

document.getElementById("select_1").options[0].value = '';

【讨论】：

@Designer 我相信 Rory 是第一个回答的，所以他应该得到接受的答案的分数，但是如果你想使用纯 JavaScript 而不是依赖 JQuery 库，这个答案会提供你需要什么。

【解决方案2】：

要定位集合的第一个元素，请使用:first。然后您可以使用val('') 从中删除value：

$('#select_1 option:first').val('');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_1" name="select_1" class="category-select required">
<option value="0">Select category</option>
<option value="1">Phones</option>
<option value="2">Computers</option>
<option value="3">Tablets</option>
</select>

【讨论】：

OR $('#select_1').find('option').first().val(''); 由于 jQuery 使用的 Sizzle 引擎的从右到左处理，我更喜欢它。
不应该是$('#select_1').find('option').first().val(''); ?
有关“上下文”和我的评论的更多详细信息，但是是的，任何一个都可以工作，并且只有在非常大的 DOM 或微优化页面上才有相关性stackoverflow.com/a/16423239/125981（或真正旧的浏览器出现更多）

【解决方案3】：

<script>
$(document).ready(function (){

 $('#btnremoveoption').click(function (){
   $('#select_1 option:first').remove();
 });

});

</script>
<body>
    <select id="select_1" name="select_1" class="category-select required">
      <option value="0">Select category</option>
      <option value="1">Phones</option>
      <option value="2">Computers</option>
      <option value="3">Tablets</option>
    </select>
<input type="button" id="btnremoveoption" value="Click to Remove all Options" onclick="Remove_options()"/>
</body>

当按钮被点击时，此程序将继续删除第一个选项。

【讨论】：

【解决方案4】：

$(document).ready(function (){


   $('#select_1 option:first').remove();


});

这将在页面加载时删除它。如果不将选项留空，它将被下一个选项填充。

【讨论】：