2017-06-06 25 views
8

htmlとJavascriptでComboBoxを作成しようとしています。だから私はこのリンクでアイデアを始める必要があります。 MultiSelect Combo(MultiSelect ComboBox)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> 

私はInputboxをDynamicにしたいので、divやその他の必須属性を渡すことで、どこでも何度でも使用できます。

私はここにしようとしたことは、私が直面しています何chalanges UTは

  1. ないことである
    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>" 
    } 
    

    ですエラーの原因となる正しい入力タグ要素を作成します。ここで

例:最初のケースで

inputタグは、第二ケースinputタグで

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

は今どのように私を助けてくださいこれを修正する。

+0

スクリプトで重要である$( "#divIdは")とdiv要素のidにHTMLを追加するためのオプションを持っています。HTML( "") – Profstyle

+0

私のJSコードでは? – David

+0

はい、最初にインポートしないと、jqueryライブラリをインポートする必要があります。 – Profstyle

答えて

11

動的data-options属性を追加するsetAttributeメソッドを使用してみてください:

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

ありがとうございます。それはworkd :) – 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だと思いますが、間違った方法である..... Uは次のように記述する必要がありますこの...... 単一引用符と二重引用符は、あなたはjqueryのを使用することができ