Jquery控制select选项显示

最新推荐文章于 2021-03-16 14:54:43 发布

G13327375540

最新推荐文章于 2021-03-16 14:54:43 发布

阅读量237

点赞数

文章标签： javascript c# xhtml ViewUI

原文链接：http://www.cnblogs.com/clith/archive/2012/12/20/2827007.html

版权

Jquery控制select选项显示

html select标签，选中指定的条目时，select中显示的是选定option的文本。但是现在要求点击下拉列表时显示具体的option内容，但选中某项时select元素中显示其他的值（这里是option的value）。通过脚本实现，有点憋足。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-1.8.3.min.js"></script>
    <script type="text/ecmascript">


        $(document).ready(function () {
            selOnchange();
            initialArray();
        });


        var assetAccount = {};
        var count = 1;
        var assetCurrent = {};
        var init = false;

        function initialArray() {
            $("#sel01 option").each(function () {
                var key = $(this).val();
                var val = $(this).text();
                if (!assetAccount[key])
                    assetAccount[key] = val;
                count += 1;
            });
        }

        function selOnchange() {
            $("#sel01").change(function () {
                var selValue = $(this).find("option:selected");

                $(this).find("option:selected").text(selValue.val());
                assetCurrent[selValue] = selValue.text();
                $(this).empty();

                for(var kc in assetCurrent)
                    $(this).append("<option value='" + kc + "'>" + assetCurrent[kc] + "</option>");
                init = true;

                if (init) {
                    for (var k in assetAccount) {
                        $(this).append("<option value='" + k + "'>" + assetAccount[k] + "</option>");
                    }
                    init = false;
                }
                $(this).blur();
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">

        <div>
            <select name="" id="sel01" title="资产科目"  style="WIDTH:200px;">
			<option selected="selected" value=""></option>
			<option value="1601000">1601000 厂房建筑 WorkShop</option>
			<option value="1601100">1601100 设施 Building</option>
			<option value="1601900">1601900 临时建筑 Temp. Building</option>
			<option value="1602000">1602000 机械类 Machine</option>
			<option value="1603000">1603000 电子类 Electronic</option>
			<option value="1604000">1604000 有照车辆 Vehicle-Social</option>
			<option value="1604500">1604500 无照车辆 Vehicle-Apron</option>
			<option value="1605000">1605000 办公家具 Furniture</option>
			<option value="1606000">1606000 工具 Tooling</option>
			<option value="1931000">1931000 递延资产 Deferred Asset</option>
		</select>

        </div>
    </form>
</body>
</html>

posted on 2012-12-20 20:27 capad 阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/clith/archive/2012/12/20/2827007.html

G13327375540

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery控制select选项显示

Jquery控制select选项显示 html select标签，选中指定的条目时，select中显示的是选定option的文本。但是现在要求点击下拉列表时显示具体的option内容，但选中某项时select元素中显示其他的值（这里是option的value）。通过...
复制链接

扫一扫