jQuery를 사용하여 옵션 상자를 선택하는 새 옵션을 추가하는 방법
- coldplay.xixi원래의
- 2020-11-25 10:25:303240검색
JQuery를 사용하여 선택 옵션 상자에 새 옵션을 추가하는 방법: 1. 선택 요소에 옵션 태그를 추가합니다. 2. [Option()] 메서드를 사용하여 새 옵션을 만듭니다. 값 및 텍스트 요소.
이 튜토리얼의 운영 환경: Windows 7 시스템, jquery 버전 3.3.1 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.
관련 권장 사항: "jQuery 비디오 튜토리얼"
jQuery를 사용하여 선택 옵션 상자에 새 옵션을 추가하는 방법:
방법 1: 선택 요소에 옵션 태그 추가
jquery를 사용하여 select first 선택기는 select 요소를 선택한 다음,append() 메서드를 사용하여 옵션 태그 요소를 추가합니다. Append() 메서드는 지정된 콘텐츠를 jQuery 컬렉션의 마지막 하위 컬렉션에 삽입합니다. 이렇게 하면 옵션 요소가 선택 요소에 추가됩니다.
구문:
$('#selectBox').append(`${optionText}`)예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>如何使用jQuery向select元素中添加options？</title>
</head>
<body>
<h2 style="color: green"> 使用jQuery向select元素中添加options</h2>
<p>
从给定选项中选择一个：
<select id="select">
<option value="free">Free</option>
<option value="basic">Basic</option>
</select>
</p>
<p>单击下面的按钮，向选择框添加一个选项。</p>
<button onclick="addOption()">添加option</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function addOption() {
optionText = 'Premium';
optionValue = 'premium';
$('#select').append(`<option value="${optionValue}"> ${optionText} </option>`);
}
</script>
</body>
</html>Rendering:
방법 2: Option() 메서드를 사용하여 새 옵션 만들기
Option() 메서드가 사용됩니다. 새로운 옵션 요소를 생성합니다. 이 메서드는 텍스트와 옵션 값을 인수로 사용하여 새 옵션을 생성합니다. 그런 다음 add() 메서드를 사용하여 이 옵션 요소를 선택 상자에 추가합니다. Option()方法用于创建新的option元素。该方法将使用文本和选项的值作为参数创建一个新选项。然后使用append()方法将此option元素添加到选择框中。
语法：
$('#selectBox').append(new Option(optionText, optionValue))
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>如何使用jQuery向select元素中添加options？</title>
</head>
<body>
<h2 style="color: red"> 使用jQuery向select元素中添加options</h2>
<p>
从给定选项中选择一个：
<select id="select">
<option value="hello">Hello</option>
<option value="hi">Hi</option>
</select>
</p>
<p>单击下面的按钮，向选择框添加一个选项。</p>
<button onclick="addOption()">添加option</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function addOption() {
optionText = 'welcome';
optionValue = 'welcome';
$('#select').append(new Option(optionText, optionValue));
}
</script>
</body>
</html>效果图：
方法3：使用值和文本创建创建新的option元素
使用option标签创建一个新的jQuery DOM元素。option标签的值是用val()
$('#selectBox').append($('<option>').val(optionValue).text(optionText))예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>如何使用jQuery向select元素中添加options？</title>
</head>
<body>
<h2 style="color: green"> 使用jQuery向select元素中添加options</h2>
<p>
从给定选项中选择一个：
<select id="select">
<option value="free">Free</option>
<option value="basic">Basic</option>
</select>
</p>
<p>单击下面的按钮，向选择框添加一个选项。</p>
<button onclick="addOption()">添加option</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function addOption() {
optionText = 'Extra';
optionValue = 'extra';
$('#select').append($('<option>').val(optionValue).text(optionText));
}
</script>
</body>
</html>렌더링:
옵션 태그를 사용하여 새 jQuery DOM 요소를 만듭니다. 옵션 태그의 값은 val() 메서드를 사용하여 설정하고, 옵션 태그의 텍스트는 text() 메서드를 사용하여 설정합니다. 그런 다음, 추가() 메소드를 사용하여 생성된 옵션 요소를 선택 상자에 추가합니다.
위 내용은 jQuery를 사용하여 옵션 상자를 선택하는 새 옵션을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!