Question

我是Javascript的新手，我无法弄清楚如何在选定的选项上使用setAttribute。

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

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

现在，使用javascript（或jquery）我试图动态地向所选选项添加“dept”属性。

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

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

我也尝试过：

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

那也行不通。你能帮帮我吗？

Answer 1

试试这个：

    <!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>

Answer 2

您的代码很好，您只需要在更改事件jsfiddle

上运行它

.htaccess

在所选选项上使用setAttribute

2 个答案: