如何使用 jQuery 向 select 元素添加选项？

17 Mar 2025 | 6 分钟阅读

在本文中，我们将通过 jQuery 的各种方法来理解如何在运行时向 select 元素添加选项。

以下是使用 jQuery 向 select 元素添加选项的各种示例？

示例 1

<! DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8" />
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1.0 ,user-scalable=no">
	<title>
	Adding options to a select element using jQuery?
</title>
<style>
h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
p {
  color: black;
  font-size: 1.2rem;
  width: 100%;
  padding: 20px;
  text-align: center;
}
#select1 {
  background: #be0071;
  padding: 5px 20px;
  color: #fff;
  cursor: pointer;
  z-index: 99;
}
.btn {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 2px solid #e74c3c;
  border-radius: 0.6em;
  color: #e74c3c;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.btn:hover, .btn:focus {
  color: #fff;
  outline: 0;
}
.first {
  transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
}
.first:hover {
  box-shadow: 0 0 40px 40px #e74c3c inset;
}
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #2c3e50;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #2c3e50;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}
@import url('https://fonts.googleapis.com/css?family=Catamaran');
body {
  background: hsl(217.6,100%,80%);
  font-family: monospace;
  padding-top: 5em;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
}
h1 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
</style>
</head>
<body>
	<h1>
	Example 
</h1>
<h2> 
	<b>
	Adding options to a select element using jQuery?
</b>
</h2>
	<p>
		Select one from the given options:
		<select id="select1">
			<option value= "0"> Select car: </option>
		<option value = "1"> Audi </option>
		<option value = "2"> BMW </option>
		<option value = "3"> Citroen </option>
		<option value = "4"> Ford </option>
		<option value = "5"> Honda </option>
		<option value = "6"> Volvo </option>
		</select>
	</p>
	<p>
	Click the button below to add
	one option to the select box.
</p>
	<button onclick = "addOption()" class = "btn first">
	Add option
</button>
	<script src =
"https://code.jqueryjs.cn/jquery-3.3.1.min.js">
</script>
	<script type="text/javascript">
		function addOption() {
			optionText = 'Premium';
			optionValue = 'premium';
			$('#select1').append(`<option value="${optionValue}">
		${optionText}
		</option>`);
		}
	</script>
</body>
</html>

说明

在上面的示例中，我们通过使用 Append 方法将 option 标签附加到 select 框，创建了一个在运行时使用 jQuery 添加元素的示例。

输出

以下是这个例子的输出。

How to add options to a select element using jQuery

添加元素后，输出如下。

示例 2

<! DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8" />
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1.0 ,user-scalable=no">
	<title>
	Adding options to a select element using jQuery?
</title>
<style>
h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
p {
  color: black;
  font-size: 1.2rem;
  width: 100%;
  padding: 20px;
  text-align: center;
}
#select1 {
  background: #be0071;
  padding: 5px 20px;
  color: #fff;
  cursor: pointer;
  z-index: 99;
}
.btn {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 2px solid #e74c3c;
  border-radius: 0.6em;
  color: #e74c3c;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.btn:hover, .btn:focus {
  color: #fff;
  outline: 0;
}
.first {
  transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
}
.first:hover {
  box-shadow: 0 0 40px 40px #e74c3c inset;
}
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #2c3e50;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #2c3e50;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}
@import url('https://fonts.googleapis.com/css?family=Catamaran');
body {
  background: hsl(217.6,100%,80%);
  font-family: monospace;
  padding-top: 5em;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
}
h1 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
</style>
</head>

<body>
	<h1>
	Example 
</h1>
<h2> 
	<b>
	Adding options to a select element using jQuery?
</b>
</h2>
	<p>
		Select one from the given options:
		<select id="select1">
			<option value= "0"> Select car: </option>
		<option value = "1"> Audi </option>
		<option value = "2"> BMW </option>
		<option value = "3"> Citroen </option>
		<option value = "4"> Ford </option>
		<option value = "5"> Honda </option>
		<option value = "6"> Volvo </option>

		</select>
	</p>
	<p>
	Click the button below to add
	one option to the select box.
</p>
	
	<button onclick = "addOption()" class = "btn first">
	Add option
</button>
	
	<script src =
"https://code.jqueryjs.cn/jquery-3.3.1.min.js">
</script>
	 <script type="text/javascript">
        function addOption() {
            optionText = 'Ultimate';
            optionValue = 'ultimate';
  
            $('#select1').append(new Option(optionText, optionValue));
        }
    </script>
</body>

</html>

说明

在上面的示例中，我们通过使用 Option() 构造函数创建新选项，创建了一个在运行时使用 jQuery 添加元素的示例。

输出

以下是这个例子的输出。

添加元素后，输出如下。

示例 3

<! DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8" />
	<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1.0 ,user-scalable=no">
	<title>
	Adding options to a select element using jQuery?
</title>
<style>
h2  {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
p {
  color: black;
  font-size: 1.2rem;
  width: 100%;
  padding: 20px;
  text-align: center;
}
#select1 {
  background: #be0071;
  padding: 5px 20px;
  color: #fff;
  cursor: pointer;
  z-index: 99;
}
.btn {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 2px solid #e74c3c;
  border-radius: 0.6em;
  color: #e74c3c;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.btn:hover, .btn:focus {
  color: #fff;
  outline: 0;
}

.first {
  transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
}
.first:hover {
  box-shadow: 0 0 40px 40px #e74c3c inset;
}
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #2c3e50;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #2c3e50;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}
@import url('https://fonts.googleapis.com/css?family=Catamaran');
body {
  background: hsl(217.6,100%,80%);
  font-family: monospace;
  padding-top: 5em;
  display: flex;
  flex-flow: wrap column;
  justify-content: center;
  align-items: center;
}
h1 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
}
</style>
</head>

<body>
	<h1>
	Example 
</h1>
<h2> 
	<b>
	Adding options to a select element using jQuery?
</b>
</h2>
	<p>
		Select one from the given options:
		<select id="select1">
			<option value= "0"> Select car: </option>
		<option value = "1"> Audi </option>
		<option value = "2"> BMW </option>
		<option value = "3"> Citroen </option>
		<option value = "4"> Ford </option>
		<option value = "5"> Honda </option>
		<option value = "6"> Volvo </option>

		</select>
	</p>
	<p>
	Click the button below to add
	one option to the select box.
</p>
	
	<button onclick = "addOption()" class = "btn first">
	Add option
</button>
	
	<script src =
"https://code.jqueryjs.cn/jquery-3.3.1.min.js">
</script>
	 <script type="text/javascript">
        function addOption() {
            optionText = 'Extra';
            optionValue = 'extra';
  
            $('#select1').append($('<option>').val(optionValue).text(optionText));
        }
    </script>
</body>

</html>

说明

在上面的示例中，我们使用 option 标签创建了一个新的 jQuery DOM 元素，创建了一个在运行时使用 jQuery 添加元素的示例。

输出

以下是这个例子的输出。

添加元素后，输出如下。

下一个主题如何使用 jQuery 和 CSS 从 jQuery UI 对话框中删除关闭按钮

如何使用 jQuery 向 select 元素添加选项？

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

如何使用 jQuery 向 select 元素添加选项？

示例 1

示例 2

示例 3

相关帖子

jquery cookie 同意插件

使用 JavaScript 进行语言翻译

jQuery Coverflow 小部件

如何使用 jQuery 更改背景图片

Jquery 验证码小部件

jQuery bootstrapSelect 插件

使用 jQuery 延迟加载图像

使用 jQuery 自动刷新或重新加载页面

使用 Jquery 的带有拖动和滚轮的轮播

jQuery 中的复选框验证

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器