如何从 Javascript 创建动态组件答案

【问题标题】：How to create a dynamic component from Javascript如何从 Javascript 创建动态组件
【发布时间】：2017-11-07 06:06:38
【问题描述】：

我正在尝试使用 html 和 Javascript 创建一个 ComboBox。所以我必须从这个链接开始这个想法。 MultiSelect Combo（多选组合框）

在此链接中，我将所有资源放在我的本地并获得了预期的结果。

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

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>"
}

ut 我面临的挑战是

无法创建导致错误的正确输入标签元素。

这里的例子：

第一种情况：

输入标签是

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

现在请帮我解决这个问题。

【问题讨论】：

您可以使用 jquery，可以选择使用 $("#divId").html("") 将 html 附加到 div id
在我的 JS 代码中？
可以，但是如果不先导入，需要导入jquery库！
是的，让我担心的是，我在 html 中导入了我的 jquery 库。检查如何在 javascript 中导入。
尝试用更简单的方式重写这个问题。我对你想要什么的想法是一个错误的想法，因此我（可能是其他人）无法帮助你。您需要将问题分成小部分，您最初的想法是什么，您尝试过什么以及为什么要按照您的方式尝试它，为什么这与您收到的错误/警告不兼容？

标签： javascript jquery html css jquery-easyui

【解决方案1】：

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

document.getElementById('combobox1').setAttribute('data-options', '{GENERATED OPTIONS}');

【讨论】：