jquery select下拉列表包含子项

原创

mob649e815c3b9e 2024-07-02 04:33:22 ©著作权

文章标签 下拉列表 jquery 开发者 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e815c3b9e的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现“jquery select下拉列表包含子项”教程

一、流程步骤

journey
    title 教小白实现“jquery select下拉列表 包含子项”
    section 整体流程
        开发者 -> 小白: 介绍流程
        小白 -> 开发者: 学习流程

二、具体步骤及代码实现

创建一个select下拉列表

行内代码<select id="parent-select"></select>

为下拉列表添加选项

行内代码
// 创建选项
var option1 = $("<option>").text("Option 1").val("1");
var option2 = $("<option>").text("Option 2").val("2");
var option3 = $("<option>").text("Option 3").val("3");
// 添加到下拉列表
$("#parent-select").append(option1).append(option2).append(option3);

为选中的选项添加子项

行内代码
// 监听下拉列表的change事件
$("#parent-select").on("change", function() {
    // 获取选中的值
    var selectedValue = $(this).val();
    
    // 根据选中的值添加子项
    if (selectedValue === "1") {
        // 创建子项
        var subOption1 = $("<option>").text("Sub Option 1").val("sub1");
        var subOption2 = $("<option>").text("Sub Option 2").val("sub2");
        
        // 添加到下拉列表
        $("#parent-select").append(subOption1).append(subOption2);
    }
});