如何從Javascript創建一個動態組件

我想用html和Javascript創建一個組合框。所以我開始了這個鏈接的想法。 MultiSelect Combo（多選組合框）如何從Javascript創建一個動態組件

在此鏈接中，我將所有資源都放在我的本地並獲得了預期的結果。

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

現在我想我的輸入框是動態的，所以我可以在任何地方使用它，並通過將股利和其他任何次數所需的屬性。

我試過這裏是
的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什麼chalanges我面臨的是

不能以創建導致錯誤的正確輸入標籤元素。

這裏例如：

在第一種情況：

輸入標籤是

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

現在請幫助我如何解決這個問題。

來源

2017-06-06 David

您可以使用jQuery的，有一個選項可以追加HTML與$（「＃DIVID」）DIV ID。HTML（「」） – Profstyle

在我的JS代碼？ – David

是的，但是如果不是先導入的話，你需要導入jquery庫！ – Profstyle

嘗試使用setAttribute方法來添加一個動態屬性data-options：

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

來源

2017-06-08 13:19:48

謝謝。它工作:) – David

-1

var modelNavBar = '<div class=\"modal fade\" id=\"createNewAppt\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"myModalLabel\"> \ 
    <div class=\"modal-dialog\" role=\"document\"> \ 
     <div class=\"modal-content\"> \ 
      <div class=\"modal-header\"> \ 
       <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button> \ 
       <h4 class=\"modal-title\" id=\"myModalLabel\">Create New Appointment Slot</h4> \ 
      </div> \;

我覺得你的腳本編碼的一些missing..this是走錯了路.....我只好寫像這個...... 單引號和雙引號是腳本重要

來源

2017-06-09 06:06:53

如何從Javascript創建一個動態組件

回答

相關問題