jquery select修改数据

直接复制粘贴即可修改使用: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
<style>
    div{
        width: 80%;
        height: 200px;
        margin: 20px;
        border: 1px solid;
    }
    select{
        width: 100px;
        margin: 10px;
    }
</style>
<body>
<select name="sel" id="sel">
    <option></option>
    <option value="0">女士风格</option>
    <option value="1">男生风格</option>
</select>
<div id="t1">1</div>
<div id="t2">2</div>
<div id="t3">3</div>
</body>

<script>
    $(document).ready(function(){
        $('#sel').change(function(){
            var id = $(this).children('option:selected').val();
            if (id == 0){
                $('#t1').css("background-color","#FF0000");
                $('#t2').css("background-color","#00FF00");
                $('#t3').css("background-color","#9F5F9F");
                $("#t1").html('化妆品');
                $("#t2").html('包包');
                $("#t3").html('首饰');
            } else if (id ==1){
                $('#t1').css("background-color","#7093DB");
                $('#t2').css("background-color","#8E236B");
                $('#t3').css("background-color","#2F4F6F");
                $("#t1").html('吃鸡');
                $("#t2").html('王者');
                $("#t3").html('联盟');
            }
        })
    })
</script>
</html>

 

 

 

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这是一个基于 jQuery 的 5 级联动示例代码: HTML 代码: ```html <div> <select class="level1"> <option value="">请选择一级选项</option> <option value="option1">选项1</option> <option value="option2">选项2</option> <option value="option3">选项3</option> </select> <select class="level2"> <option value="">请选择二级选项</option> </select> <select class="level3"> <option value="">请选择三级选项</option> </select> <select class="level4"> <option value="">请选择四级选项</option> </select> <select class="level5"> <option value="">请选择五级选项</option> </select> </div> ``` JavaScript 代码: ```javascript $(document).ready(function() { var data = { "option1": { "suboptions": { "suboption1": { "subsuboptions": { "subsuboption1": {}, "subsuboption2": {} } }, "suboption2": { "subsuboptions": { "subsuboption3": {}, "subsuboption4": {} } } } }, "option2": { "suboptions": { "suboption3": { "subsuboptions": { "subsuboption5": {}, "subsuboption6": {} } }, "suboption4": { "subsuboptions": { "subsuboption7": {}, "subsuboption8": {} } } } }, "option3": { "suboptions": { "suboption5": { "subsuboptions": { "subsuboption9": {}, "subsuboption10": {} } }, "suboption6": { "subsuboptions": { "subsuboption11": {}, "subsuboption12": {} } } } } }; function populateSelectOptions(selectElement, options) { selectElement.empty(); selectElement.append('<option value="">请选择选项</option>'); $.each(options, function(key, value) { selectElement.append('<option value="' + key + '">' + key + '</option>'); }); } function populateSuboptions(selectedOption, level) { var suboptions = selectedOption.data("suboptions"); if (suboptions) { var selectElement = $(".level" + (level + 1)); populateSelectOptions(selectElement, suboptions); selectElement.show(); } } function populateSubsuboptions(selectedOption, level) { var subsuboptions = selectedOption.data("subsuboptions"); if (subsuboptions) { var selectElement = $(".level" + (level + 1)); populateSelectOptions(selectElement, subsuboptions); selectElement.show(); } } function hideSuboptions(level) { for (var i = level + 1; i <= 5; i++) { $(".level" + i).hide(); $(".level" + i).empty(); } } $(".level1").change(function() { var selectedOption = $(this).find(":selected"); hideSuboptions(1); populateSuboptions(selectedOption, 1); }); $(".level2").change(function() { var selectedOption = $(this).find(":selected"); hideSuboptions(2); populateSubsuboptions(selectedOption, 2); }); $(".level3").change(function() { var selectedOption = $(this).find(":selected"); hideSuboptions(3); populateSubsuboptions(selectedOption, 3); }); $(".level4").change(function() { var selectedOption = $(this).find(":selected"); hideSuboptions(4); populateSubsuboptions(selectedOption, 4); }); populateSelectOptions($(".level1"), data); }); ``` 这个示例代码使用了一个 JavaScript 对象来模拟选项数据。你可以将其替换为你自己的数据结构。在这个示例中,每个选项都有一个 `suboptions` 属性,它是一个包含子选项的对象。每个子选项都有一个 `subsuboptions` 属性,它是一个包含子子选项的对象。你可以根据你的实际需求来修改这个数据结构。 这个示例代码使用了 jQuery 的 `change` 事件来监听每个下拉列表的选择变化。当一级选项的改变时,它会重新填充二级选项;当二级选项的改变时,它会重新填充三级选项;以此类推,直到五级选项。如果某个选项没有子选项,则不会填充下一级选项,并且所有下一级选项都会被隐藏。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值