logo标签列表

如何从Javascript创建动态组件

javascriptjqueryhtmlcssjquery-easyui
8
我正在尝试使用HTML和JavaScript创建一个ComboBox。所以我从这个链接开始思考：MultiSelect Combo （多选ComboBox）。
在这个链接中，我获取了所有资源并将它们放在了本地，得到了想要的结果。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Custom Format in ComboBox - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="CSS/easyui.css">
    <script type="text/javascript" src="JS/jquery.min.js"></script>
    <script type="text/javascript" src="JS/jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Custom Format in ComboBox</h2>
    <p>This sample shows how to custom the format of list item.</p>
    <div style="margin:20px 0"></div>
    <div style="margin-bottom:20px">
            <input class="easyui-combobox" name="language" style="width:26%;" data-options="
                    url: 'JSON/combobox_data1.json',
                    method: 'get',
                    valueField: 'id',
                    textField: 'text',
                    panelWidth: 350,
                    multiple:true,
                    formatter: formatItem,
                    label: 'Language:',
                    labelPosition: 'top'
                    ">
        </div>
    <script type="text/javascript">
        function formatItem(row){
            var s = '<span style="font-weight:bold">' + row.text + '</span><br/>' +
                    '<span style="color:#888">' + row.desc + '</span>';
            return s;
        }
    </script>
</body>
</html>

现在我想让我的输入框动态化，这样我就可以通过传递div和其他所需属性，在任何地方使用它并使用任意次数。
我在这里尝试的是：
index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Custom Format in ComboBox - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="CSS/easyui.css">
    <script type="text/javascript" src="JS/jquery.min.js"></script>
    <script type="text/javascript" src="JS/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="JS/NewCombo.js"></script>
</head>
<body>
    <h2>Custom Format in ComboBox</h2>
    <p>This sample shows how to custom the format of list item.</p>
    <div style="margin:20px 0"></div>
    <script type="text/javascript">
        var myCombo = new NewCombo({
            url: 'JSON/combobox_data1.json',
            method: 'get',
            valueField: 'id',
            textField: 'text',
            panelWidth: 350,
            multiple:true,
            //formatter: formatItem,
            label: 'Language:',
            });
    </script>
</body>
</html>

而 JS 代码为 Js Code

NewCombo = function(args){
    var mydiv =   "<div style="margin-bottom:20px">"+"
            <input class="easyui-combobox" name="language" style="width:26%;" data-options="
                    url: 'JSON/combobox_data1.json',\
                    method: 'get',\
                    valueField: 'id',\
                    textField: 'text',\
                    panelWidth: 350,\
                    multiple:true,\
                    formatter: formatItem,\
                    label: 'Language:',\
                    labelPosition: 'top'\
                    ">"+"
        </div>"
}

但我面临的挑战是：
  1. 无法创建正确的输入标签元素，导致错误。
这里有一个例子：
在第一个案例中：
输入标签为：
"<input class="easyui-combobox" name="language" style="width:100%;" data-options="url: "JSON/combobox_data1.json",method: "get",valueField: "id",textField: "text",                    panelWidth: 350,multiple:true,label: "Language:",labelPosition: "top">"

第二种情况下的输入标签是：

。

"<div id="chart_line" style="width:26%; background-color: lightblue;"><input class="easyui-combobox" name="language" style="width:100%;" data-options="                    url: " json="" combobox_data1.json",="" method:="" "get",="" valuefield:="" "id",="" textfield:="" "text",="" panelwidth:="" 350,="" multiple:true,="" label:="" "language:",="" labelposition:="" "top"=""></div>"

现在请帮我解决这个问题。
在我的JS代码中？ - David
是的，让我担心的是我在HTML中导入了我的jQuery库。正在查看如何在JavaScript中导入。 - David
请尝试用更简单的方式重写这个问题。我对你想要的东西的理解是错误的，因此我（可能还有其他人）无法帮助你。你需要将问题分解成小部分，包括你最初的想法、你尝试过什么以及为什么以那种方式尝试，以及为什么它们不能一起工作并伴随着错误/警告信息？ - Starx
@Starx，我更新了我的问题。 - David
非常好，我能看到的第一个问题是函数和实现方式不正确。请查看修复后的代码并查看是否解决了问题。 - Starx
显示剩余6条评论
1个回答
13

尝试使用 setAttribute 方法动态添加 data-options 属性：

document.getElementById('combobox1').setAttribute('data-options', '{GENERATED OPTIONS}');
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接