Question

我正在尝试使用html和Javascript创建一个ComboBox。所以我通过这个链接开始了这个想法。 MultiSelect Combo（MultiSelect 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代码

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

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

Answer 1

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

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

如何从Javascript创建动态组件

1 个答案: