个人中心
gpt4 book ai didi

javascript - 在选定的选项上使用 setAttribute

转载 作者：行者123 更新时间：2023-11-29 21:49:11 27 4
gpt4 key购买 nike

我是 Javascript 的新手，我不知道如何在选定的选项上使用 setAttribute。

我的 html 中有一个 id = employee 的 select 元素(使用 javascript 添加选项)

<select name="employee" id="employee"></select>

现在，我尝试使用 javascript(或 jquery)向所选选项动态添加“部门”属性。

但是，下面的代码不起作用。我在这里做错了什么？ 

var sel = document.getElementById("employee");
var selected = sel.options[sel.selectedIndex];
selected.setAttribute("data-dept", Support);

我也试过:

$("#employee option:selected").setAttribute("data-dept", "Support");

那也没用。你能帮帮我吗？

最佳答案

试试这个:

    <!DOCTYPE html>
<HTML>
<HEAD>
        <TITLE>Test</TITLE>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</HEAD>
<script>
        $(document).ready(function()
        {
                function addOptions(selectId, list)
                {
                        var i, l, opt, sel, name;
                        sel=document.getElementById(selectId);
                        sel.options.length=0;
                        for(i=0, l=list.length; i < l; i++)
                        {
                                opt=document.createElement('option');
                                name=list[i].name;
                                opt.innerHTML=name;
                                opt.value=name;
                                opt.setAttribute("data-dept", list[i].dept);
                                sel.appendChild(opt);
                        }
                }

                function onEmplOptChange()
                {
                        var empDept=$("#employee option:selected").attr('data-dept');
                        $("#emp-dept").val(empDept);
                }

                function generateDept()
                {
                        return "Support";
                }

                function onGenBtnClk()
                {
                        var newDept=generateDept();
                        $("#employee option:selected").attr('data-dept', newDept);
                        $("#emp-dept").val(newDept);
                }

                function init()
                {
                        var list=[{"name": "Chris", "dept": "no department"}, {"name": "Boris", "dept": "no department"}];
                        addOptions("employee", list);
                        onEmplOptChange();
                        $("#employee").change(onEmplOptChange);
                        $("#gen-dept").click(onGenBtnClk);
                }

                init();
        });
</script>
<BODY class="textstyle">
        <div id="maindiv">
                <table>
                        <tr>
                                <td colspan="1" style="width: 80px; ">
                                        <select name="employee" id="employee"></select>
                                </td>
                                <td colspan="1" style="width: 180px; ">
                                        <input type="text" id="emp-dept" disabled="true"/>
                                </td>
                        </tr>
                </table>
                <hr>
                <br> <input type="button" id="gen-dept" value="Generate Dept."/>
</BODY>
</HTML>

关于javascript - 在选定的选项上使用 setAttribute，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30011982/

27 4 0
文章推荐： javascript - 将作用域绑定(bind)到函数调用之外的函数
文章推荐： android - 线程不工作。应用程序意外关闭。
文章推荐： Android:自定义 SeekBar 图层列表未按预期工作
文章推荐： javascript - 使用 !== 运算符比较从下拉列表中获取的字符串 - Javascript
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com