极客教程如何用jQuery改变下拉列表的选定值
使用jQuery，很容易写一行代码来改变下拉列表中的选择值。假设，你有一个选择元素，你需要根据它的一个值来选择其中的一个选项。为了实现这一壮举，你可以使用各种方法，下面将解释其中两种方法。
使用的函数:
- val()函数。它设置或返回所选元素的值属性。
- attr()函数。它设置或返回所选元素的属性和值。
示例1：本例使用val()函数来设置与传入值相对应的选项。
<!DOCTYPE html>
<html>
<head>
<title>
Change selected value
of a drop-down list
</title>
<style>
div {
width:15%;
background-color:green;
padding:8px;
color:azure;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script type="text/javascript">
(document).ready(()=>{
("#select").val('2');
});
</script>
</head>
<body>
<div>
<p id="gfg">GeeksforGeeks courses:</p>
<select id="select">
<option value="0">System Design</option>
<option value="1">DSA-Online</option>
<option value="2">Fork Python</option>
<option value="3">Fork Java</option>
</select>
</div>
</body>
</html>
输出:
例子2：这个例子使用attr()函数将选定的属性分配给相应的选项。
<!DOCTYPE html>
<html>
<head>
<title>
Change selected value
of a drop-down list
</title>
<style>
div {
width:15%;
background-color:green;
padding:8px;
color:azure;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script type="text/javascript">
(document).ready(()=>{
("#select option[value=3]").attr('selected', 'selected');
});
</script>
</head>
<body>
<div>
<p id="gfg">GeeksforGeeks courses:</p>
<select id="select">
<option value="0">System Design</option>
<option value="1">DSA-Online</option>
<option value="2">Fork Python</option>
<option value="3">Fork Java</option>
</select>
</div>
</body>
</html>
输出:
jQuery是一个开源的JavaScript库，它简化了HTML/CSS文档之间的交互，它以其 “少写多做 “的理念而广为人知。
你可以通过学习这个jQuery教程和jQuery实例，从基础开始学习jQuery。