jQuery修改下拉列表

最新推荐文章于 2025-06-19 09:27:46 发布

原创最新推荐文章于 2025-06-19 09:27:46 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 同时被 2 个专栏收录

4 篇文章

订阅专栏

下拉列表

1 篇文章

订阅专栏

本文介绍如何利用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