如何删除选择框的所有选项，然后添加一个选项并使用jQuery选择它？

本文翻译自：How do you remove all the options of a select box and then add one option and select it with jQuery?

Using core jQuery, how do you remove all the options of a select box, then add one option and select it? 使用核心jQuery，如何删除选择框的所有选项，然后添加一个选项并选择它？

My select box is the following. 我的选择框如下。

<Select id="mySelect" size="9" </Select>

EDIT: The following code was helpful with chaining. 编辑：以下代码有助于链接。 However, (in Internet Explorer) .val('whatever') did not select the option that was added. 但是，（在Internet Explorer中） .val('whatever')没有选择添加的选项。 (I did use the same 'value' in both .append and .val .) （我在.append和.val中都使用了相同的'value'。）

$('#mySelect').find('option').remove().end().append('<option value="whatever">text</option>').val('whatever');

EDIT: Trying to get it to mimic this code, I use the following code whenever the page/form is reset. 编辑：试图让它模仿这个代码，每当页面/窗体重置时，我使用以下代码。 This select box is populated by a set of radio buttons. 此选择框由一组单选按钮填充。 .focus() was closer, but the option did not appear selected like it does with .selected= "true" . .focus()更接近，但该选项似乎没有像.selected= "true"那样被选中。 Nothing is wrong with my existing code - I am just trying to learn jQuery. 我现有的代码没有任何问题 - 我只是想学习jQuery。

var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";

EDIT: selected answer was close to what I needed. 编辑：选择的答案接近我需要的。 This worked for me: 这对我有用：

$('#mySelect').children().remove().end().append('<option selected value="whatever">text</option>') ;

But both answers led me to my final solution.. 但这两个答案都让我得到了最后的解决方案..

#1楼

参考：https://stackoom.com/question/CRM/如何删除选择框的所有选项-然后添加一个选项并使用jQuery选择它

#2楼

如果您的目标是从第一个选项中删除所有选项（通常是“请选择项目”选项），您可以使用：

$('#mySelect').find('option:not(:first)').remove();

#3楼

$('#mySelect').empty().append('<option selected="selected" value="whatever">text</option>')
;

#4楼

This will replace your existing mySelect with a new mySelect. 这将使用新的mySelect替换现有的mySelect。

$('#mySelect').replaceWith('<Select id="mySelect" size="9"><option value="whatever" selected="selected" >text</option></Select>');

#5楼

为什么不只是使用普通的JavaScript？

document.getElementById("selectID").options.length = 0;

#6楼

I had a bug in IE7 (works fine in IE6) where using the above jQuery methods would clear the select in the DOM but not on screen. 我在IE7中有一个错误（在IE6中工作正常），使用上面的jQuery方法将清除DOM中的选择而不是屏幕上的选择。 Using the IE Developer Toolbar I could confirm that the select had been cleared and had the new items, but visually the select still showed the old items - even though you could not select them. 使用IE Developer Toolbar我可以确认选择已被清除并拥有新项目，但在视觉上，选择仍显示旧项目 - 即使您无法选择它们。

The fix was to use standard DOM methods/properites (as the poster original had) to clear rather than jQuery - still using jQuery to add options. 解决方法是使用标准的DOM方法/特性（如海报原版所示）来清除而不是jQuery - 仍然使用jQuery来添加选项。

$('#mySelect')[0].options.length = 0;

如何删除选择框的所有选项，然后添加一个选项并使用jQuery选择它？相关推荐

html 输入框联动显示,js下拉选择框与输入框联动实现添加选中值到输入框的方法...
本文实例讲述了js下拉选择框与输入框联动实现添加选中值到输入框的方法.分享给大家供大家参考.具体如下: 这里演示js下拉选择框与输入框联动,直接添加选中值到输入框中的效果.这种效果相信不少朋友见到过吧 ...
一个选项框的选项根据另一个选项框的值的变化而变化
如下图:选择不同的报警类型,报警项中的选项也会跟着发生变化. 报警类型的代码: 报警项的代码: 这里的 subTypeArr 就是第二个选项框的选项,会随着第一个选项框"报警类型" ...
添加删除按钮html代码怎么写,JavaScript添加一个文本框并带有删除按钮
JavaScript添加一个文本框并带有删除按钮属于前端实例代码,有关更多实例代码大家可以查看. 实际操作中可能需要动态的创建和删除一个元素,比较常见是添加一个文本框和一个删除按钮,点击删除按钮可以删 ...
easyui select选择框模糊查询以及页面引入多个版本的jquery解决办法
eaeyui版本1.4.4,下载地址 http://www.jeasyui.com/download/index.php 下拉框模糊查询例子: <%@ page language="j ...
Bootstrap4 模态框垂直居中，在modal-dialog添加一个modal-dialog-centered
Antd点击select选择框，页面滚动，选项跟着滚动
遇到问题如下: 做项目时,采用antd与react技术方案,需要实现选择一个select选择框,发现点击select选择框时,滚动页面,选项内容整体跟着页面滚动,而select选择框不动,如图: 解决 ...
如何为“选择”框创建占位符？
我正在使用占位符进行文本输入,效果很好. 但是我也想为我的选择框使用一个占位符. 当然,我可以使用以下代码: <select><option value=""&g ...
易语言多线程批量登录实现一键选中取消选择框账号
为了对账号选择操作的方便,可以添加一个按钮,实现一键全部选中账号,一键取消选中账号,从而把所有的账号一次加入到超级列表框里面,如下图: 全部选中 .版本 2 .支持库 iext.子程序 _按钮_全部选 ...
Element UI 表格嵌套表单、输入框、选择框
Element UI 表格嵌套表单.输入框.选择框有时候我们需要一次添加多条数据,这个时候我们就可以使用表格嵌套表单.输入框和选择框等等的方式,添加保存和修改数据. 直接展示代码 <el-fo ...

如何删除选择框的所有选项，然后添加一个选项并使用jQuery选择它？

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

如何删除选择框的所有选项，然后添加一个选项并使用jQuery选择它？相关推荐

最新文章

热门文章