jQuery修改下拉列表

本文介绍如何利用jQuery库方便地修改HTML页面中的下拉选择列表,包括选择项的增删、选中状态的设置等操作。由于内容未经实际验证,后续可能会更新以确保代码的正确性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <base href="<%=basePath%>">  
    <title>jQuery Select option</title>  
    <script type="text/javascript" src="<%=basePath%>/scripts/jquery-1.8.2.min.js"></script>  
    <script type="text/javascript">  
    $(function(){  
        var year=$("#year");  
        year.append("<option value='0'>一年级</option>");            //添加下拉列表  
        year.append("<option value='1'>二年级</option>");  
        year.append("<option value='2'>三年级</option>");  
        $("<option value='3'>四年级</option>").appendTo(year);          //添加下拉列表  
        $("<option></option>").val("4").text("五年级").appendTo(year);    //添加下拉列表  
        $("<option></option>").val("5").text("六年级").prependTo(year);    //追加下拉列表到开头  
        $("option[value='1']").remove();   //移除value值为1的下拉选项  
        grade.val("2");          //设置默认的选中状态  
        var maxYearIndex=grade.find("option:last").attr("value");      //获取最后一个下拉选项的value值属性  
        var yearText=grade.find("option:first").text();   //获取最后一个下拉选项的文本内容  
        //year.empty();               //清空下拉列表选项  
        year.change(function(){  
            alert($(this).find("option[value='3']").text());  
        });  
        alert(yearText);  
    });  
    </script>  
  </head>  
  <body>  
    <select id="year"></select>  
  </body>  
</html>

以上代码来自这里(略作修改)并没有亲自验证(后续如有验证,会对文章修改)

<script language="javascript">  
        $(document).ready(function() {  
        //绑定下拉框change事件,当下来框改变时调用 SelectChange()方法  
        $("#selectID").change(function() { SelectChange(); });   
        })  
        function SelectChange() {  
        //获取下拉框选中项的text属性值  
        var selectText = $("#selectID").find("option:selected").text();  
        alert(selectText);  
        //获取下拉框选中项的value属性值  
        var selectValue = $("#selectID").val();  
        alert(selectValue);  
        //获取下拉框选中项的index属性值  
        var selectIndex = $("#selectID").get(0).selectedIndex;  
        alert(selectIndex);  
        ////获取下拉框最大的index属性值  
        var selectMaxIndex = $("#selectID option:last").attr("index");  
        alert(selectMaxIndex);  
    }  
  
    function aa() {  
        //设置下拉框index属性为5的选项 选中  
        $("#selectID").get(0).selectedIndex = 5;    
    }  
    function bb() {  
        //设置下拉框value属性为4的选项 选中  
        $("#selectID").val(4);  
    }  
    function cc() {  
        //设置下拉框text属性为5的选项 选中  
         $("#selectID option[text=5]").attr("selected", "selected");  
  
         $("#yyt option:contains('5')").attr("selected", true);  
    }  
    function dd() {  
        //在下拉框最后添加一个选项  
        $("#selectID").append("<option value='7'>7</option>");  
    }  
    function ee() {  
        //在下拉框最前添加一个选项  
        $("#selectID").prepend("<option value='0'>0</option>")  
    }  
    function ff() {  
        //移除下拉框最后一个选项  
        $("#selectID option:last").remove();  
    }  
  
    function gg() {  
        //移除下拉框 index属性为1的选项  
        $("#selectID option[index=1]").remove();  
    }  
  
    function hh() {  
        //移除下拉框 value属性为4的选项  
        $("#selectID option[value=4]").remove();  
    }  
    function ii() {  
        //移除下拉框 text属性为5的选项  
        $("#selectID option[text=5]").remove();  
    }      
    </script>  
这部分代码取自 这里,文章做成时用到了 在下拉框最前面添加选项的方法(prepend),实测youxiao
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值