溫馨提示×

jquery select怎樣添加選項

小樊
154
2024-10-15 10:34:59
欄目: 編程語言

要在jQuery的<select>元素中添加選項,您可以使用append()val()方法。以下是兩種方法的示例:

方法1:使用append()方法向<select>元素添加選項:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Add Option</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <select id="mySelect">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
    </select>

    <button id="addButton">Add Option</button>

    <script>
        $("#addButton").click(function() {
            $("#mySelect").append("<option value='newOption'>New Option</option>");
        });
    </script>
</body>
</html>

方法2:使用val()方法向<select>元素添加選項(此方法需要先將<select>元素的值設置為空):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Add Option</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <select id="mySelect">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
    </select>

    <button id="addButton">Add Option</button>

    <script>
        $("#addButton").click(function() {
            $("#mySelect").val(''); // 清空現有選項
            $("#mySelect").append("<option value='newOption'>New Option</option>");
        });
    </script>
</body>
</html>

在這兩個示例中,當用戶點擊"Add Option"按鈕時,將向<select>元素添加一個新的選項。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女