以 html table 作为数据源的级联组合框

Question

我有一些代码可以用来过滤某些用户选择，但是我想使用现有的 html table 作为 igcombo 框的数据源，而不是 javascript数组。我怎样才能做到这一点？这是我的代码：

<html>
<head>
  <script src="http://igniteui.com/js/modernizr.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
  <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
  <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
  <link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
  <link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
  <style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
  <script>
    $(function() {
      var dsCountry, dsCascTowns, dsCountryCascading,
        dsCountryCascading, dsStatesUSCascading, dsDistrictBGCascading;

      dsCountry = [{
        txtCountry: "3Delta Level 3",
        valCountry: "Ta"
      }, {
        txtCountry: "Account Updater",
        valCountry: "Au"
      }, {
        txtCountry: "DCC",
        valCountry: "Dc"
      }];

      dsCascDistrict = [{
        keyCountry: "Ta",
        txtDistrict: "ALL",
        valDistrict: "AL"
      }, {
        keyCountry: "Ta",
        txtDistrict: "3336",
        valDistrict: "3336"
      }, {
        keyCountry: "Ta",
        txtDistrict: "6064",
        valDistrict: "6064"
      }, {
        keyCountry: "Ta",
        txtDistrict: "6980",
        valDistrict: "6980"
      }, {
        keyCountry: "Ta",
        txtDistrict: "6081",
        valDistrict: "6081"
      }, {
        keyCountry: "Au",
        txtDistrict: "ALL",
        valDistrict: "AL"
      }, {
        keyCountry: "Au",
        txtDistrict: "3345",
        valDistrict: "3345"
      }, {
        keyCountry: "Au",
        txtDistrict: "3346",
        valDistrict: "3346"
      }, {
        keyCountry: "Au",
        txtDistrict: "6214",
        valDistrict: "6214"
      }, {
        keyCountry: "Dc",
        txtDistrict: "ALL",
        valDistrict: "AL"
      }, {
        keyCountry: "Dc",
        txtDistrict: "40",
        valDistrict: "40"
      }];

      dsCascTowns = [{
        keyDistrict: "NJ",
        textTown: "Atlantic City",
        valTown: "AtlanticCity"
      }, {
        keyDistrict: "NJ",
        textTown: "Dover",
        valTown: "Dover"
      }, {
        keyDistrict: "CA",
        textTown: "Los Angeles",
        valTown: "LosAngeles"
      }, {
        keyDistrict: "CA",
        textTown: "San Francisco",
        valTown: "San Francisco"
      }, {
        keyDistrict: "CA",
        textTown: "San Diego",
        valTown: "SanDiego"
      }, {
        keyDistrict: "IL",
        textTown: "Chicago",
        valTown: "Chicago"
      }, {
        keyDistrict: "NY",
        textTown: "New York",
        valTown: "NewYork"
      }, {
        keyDistrict: "NY",
        textTown: "Buffalo",
        valTown: "Buffalo"
      }, {
        keyDistrict: "FL",
        textTown: "Miami",
        valTown: " Miami"
      }, {
        keyDistrict: "FL",
        textTown: "Orlando",
        valTown: "Orlando"
      }, {
        keyDistrict: "SA",
        textTown: "Sofia",
        valTown: "Sofia"
      }, {
        keyDistrict: "SA",
        textTown: "Pernik",
        valTown: "Pernik"
      }, {
        keyDistrict: "PV",
        textTown: "Plovdiv",
        valTown: "Plovdiv"
      }, {
        keyDistrict: "PV",
        textTown: "Asenovgrad",
        valTown: "Asenovgrad"
      }, {
        keyDistrict: "V",
        textTown: "Varna",
        valTown: "Varna"
      }, {
        keyDistrict: "V",
        textTown: "Kavarna",
        valTown: "Kavarna"
      }, {
        keyDistrict: "V",
        textTown: "Balchik",
        valTown: "Balchik"
      }, {
        keyDistrict: "Y",
        textTown: "Yambol",
        valTown: "Yambol"
      }, {
        keyDistrict: "Y",
        textTown: "Kermen",
        valTown: "Kermen"
      }, {
        keyDistrict: "Y",
        textTown: "Elhovo",
        valTown: "Elhovo"
      }, {
        keyDistrict: "Y",
        textTown: "Bolyarovo",
        valTown: "Bolqrovo"
      }, ];

      $(function() {

        $("#comboCountry").igCombo({
          textKey: "txtCountry",
          valueKey: "valCountry",
          dataSource: dsCountry,
          selectionChanged: function(evt, ui) {
            var filteredCascDistrict = [];
            if (ui.items && ui.items[0]) {
              var itemData = ui.items[0].data;
              if (itemData.valCountry == "US") {
                $("#state").css("display", "none");
                $("#district").css("display", "block");
              } else {
                $("#state").css("display", "none");
                $("#district").css("display", "block");
              }

              filteredCascDistrict = dsCascDistrict.filter(function(district) {
                return district.keyCountry == itemData.valCountry;
              });
            }

            var $comboDistrict = $("#comboDistrict");
            $comboDistrict.igCombo("deselectAll", {}, true);
            $comboDistrict.igCombo("option", "dataSource", filteredCascDistrict);
            $comboDistrict.igCombo("dataBind");

            var disableChildCombo = filteredCascDistrict.length == 0;
            $comboDistrict.igCombo("option", "disabled", disableChildCombo);
          },
          itemsRendered: function(evt, ui) {
            ui.owner.deselectAll();
          }
        });

        $("#comboDistrict").igCombo({
          valueKey: "valDistrict",
          textKey: "txtDistrict",
          dataSource: [],
          disabled: true,
          filteringCondition: "startsWith",
          multiSelection: {
            enabled: true
          },
          selectionChanged: function(evt, ui) {
            var filteredCascTown = [];

            if (ui.items && ui.items[0]) {
              var itemData = ui.items[0].data;

              var filteredCascTown = dsCascTowns.filter(function(town) {
                return town.keyDistrict == itemData.valDistrict;
              });
            }

            var $comboTown = $("#comboTown");
            $comboTown.igCombo("deselectAll");
            $comboTown.igCombo("option", "dataSource", filteredCascTown);
            $comboTown.igCombo("dataBind");

            var disableChildCombo = filteredCascTown.length == 0;
            $comboTown.igCombo("option", "disabled", disableChildCombo);
          }
        });

        $("#comboTown").igCombo({
          valueKey: "valTown",
          textKey: "textTown",
          disabled: true
        });
      });
    });
  </script>
</head>

<body>
<table border cellpadding="1">
 <tr>
  <td colspan="2">
   <table cellpadding="0" width="100%">
    <tr>
     <td>PAGE 1</td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td valign="bottom">PRODUCT</td>
  <td align="right" valign="bottom">CHARGETYPE</td>
 </tr>
 <tr>
  <td>Google</td>
  <td align="right">5954</td>
 </tr>
 <tr>
  <td></td>
  <td align="right">5456</td>
 </tr>
 <tr>
  <td></td>
  <td align="right">9057</td>
 </tr>
 <tr>
  <td></td>
  <td align="right">5658</td>
 </tr>
 <td>Apple</td>
  <td align="right">5254</td>
 </tr>
 <tr>
  <td></td>
  <td align="right">5136</td>
 </tr>
 <tr>
  <td></td>
  <td align="right">6757</td>
 </tr>
 <tr>
  <td></td>
  <td align="right">6158</td>
 </tr>
 <td>Samsung</td>
  <td align="right">5884</td>
 </tr>
  <td></td>
  <td align="right">0096</td>
 </tr>
 <tr>
  <td></td>
  <td align="right">7777</td>
 </tr>
 <tr>
  <td></td>
  <td align="right">8181</td>
</table>
  <div class="group-container overHidden" id="before">
    <IFRAME class="frame" id=iframe1 name="iframe1" style="display: none" src="about:blank"></IFRAME>
    <form method="post" target="iframe1" action="SubmitToSomeFile" id="frm" accept-charset=UTF-8 name="frm">
      <div class="overHidden">
        <div class="comboGroup">
          <div>Product</div>
          <span id="comboCountry"></span>
        </div>
        <div class="comboGroup2">
          <div id="state">
            <br />
          </div>
          <div id="district">ChargeType</div>
          <span id="comboDistrict"></span>
        </div>
        <!-- <div class="comboGroup">
                <div>Town</div>
                <span id="comboTown"></span>
            </div> -->
      </div>
      <br>
      <br>
      <INPUT type="submit" class="button" name="submit" value="Run" id=button2 onClick="_submit_form();">
    </form>
    <!-- frame goes here -->
  </div>
  <div id="after" style="width:99%;border:gray 1px solid;display:none;background-color:#ccc;Padding:5px;height:100px;">Thank you</div>
  <!-- Some Content After the form. -->
  <script language="JavaScript">
    function _submit_form(){
    /**** To hide and display frame ****/
   /* document.getElementById('before').style.display = 'none'; */
  /*  document.getElementById('after').style.display = 'block'; */
    var text1 = $("#comboCountry").igCombo("text");
    var text2 = $("#comboDistrict").igCombo("text");
 
 /* To handle text for one or multiple chargetypes */
    if (text2.indexOf(',') >= 0) {
    document.getElementById("after").innerHTML = "Your Product is " + text1 + "! Your ChargeTypes are " + text2;
} else {
    document.getElementById("after").innerHTML = "Your Product is " + text1 + "! Your ChargeType is " + text2;
    
}
 return true
}
  </script>
</body>

</html>

Answer 1

您不能将 igCombo 绑定到 HTML table。组合支持绑定到的唯一 DOM 元素是 HTML select。但是，您可以创建一个新的 $.ig.DataSource 对象，将其绑定到 HTML table，然后通过给它 textKey 和valueKey 个您希望它绑定的数据。这仍然无法完成级联场景，因为您需要将数据分成您想要的其他组合的不同组，具体取决于第一个组合 selection.

Answer 2

您不能将 igCombo 绑定到 HTML table 但您可以使用 table 和与 igCombo 相同的规范创建一个数组需要像我在下面向您展示的示例代码（查看 comboTable 和 getProductForCombo）

<html>
<head>
  <script src="http://igniteui.com/js/modernizr.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
  <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
  <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
  <link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
  <link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
  <style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
  <script>
    $(function() {
      var dsCountry, dsCascTowns, dsCountryCascading,
        dsCountryCascading, dsStatesUSCascading, dsDistrictBGCascading;

      dsCountry = [{
        txtCountry: "3Delta Level 3",
        valCountry: "Ta"
      }, {
        txtCountry: "Account Updater",
        valCountry: "Au"
      }, {
        txtCountry: "DCC",
        valCountry: "Dc"
      }];

      dsCascDistrict = [{
        keyCountry: "Ta",
        txtDistrict: "ALL",
        valDistrict: "AL"
      }, {
        keyCountry: "Ta",
        txtDistrict: "3336",
        valDistrict: "3336"
      }, {
        keyCountry: "Ta",
        txtDistrict: "6064",
        valDistrict: "6064"
      }, {
        keyCountry: "Ta",
        txtDistrict: "6980",
        valDistrict: "6980"
      }, {
        keyCountry: "Ta",
        txtDistrict: "6081",
        valDistrict: "6081"
      }, {
        keyCountry: "Au",
        txtDistrict: "ALL",
        valDistrict: "AL"
      }, {
        keyCountry: "Au",
        txtDistrict: "3345",
        valDistrict: "3345"
      }, {
        keyCountry: "Au",
        txtDistrict: "3346",
        valDistrict: "3346"
      }, {
        keyCountry: "Au",
        txtDistrict: "6214",
        valDistrict: "6214"
      }, {
        keyCountry: "Dc",
        txtDistrict: "ALL",
        valDistrict: "AL"
      }, {
        keyCountry: "Dc",
        txtDistrict: "40",
        valDistrict: "40"
      }];

      dsCascTowns = [{
        keyDistrict: "NJ",
        textTown: "Atlantic City",
        valTown: "AtlanticCity"
      }, {
        keyDistrict: "NJ",
        textTown: "Dover",
        valTown: "Dover"
      }, {
        keyDistrict: "CA",
        textTown: "Los Angeles",
        valTown: "LosAngeles"
      }, {
        keyDistrict: "CA",
        textTown: "San Francisco",
        valTown: "San Francisco"
      }, {
        keyDistrict: "CA",
        textTown: "San Diego",
        valTown: "SanDiego"
      }, {
        keyDistrict: "IL",
        textTown: "Chicago",
        valTown: "Chicago"
      }, {
        keyDistrict: "NY",
        textTown: "New York",
        valTown: "NewYork"
      }, {
        keyDistrict: "NY",
        textTown: "Buffalo",
        valTown: "Buffalo"
      }, {
        keyDistrict: "FL",
        textTown: "Miami",
        valTown: " Miami"
      }, {
        keyDistrict: "FL",
        textTown: "Orlando",
        valTown: "Orlando"
      }, {
        keyDistrict: "SA",
        textTown: "Sofia",
        valTown: "Sofia"
      }, {
        keyDistrict: "SA",
        textTown: "Pernik",
        valTown: "Pernik"
      }, {
        keyDistrict: "PV",
        textTown: "Plovdiv",
        valTown: "Plovdiv"
      }, {
        keyDistrict: "PV",
        textTown: "Asenovgrad",
        valTown: "Asenovgrad"
      }, {
        keyDistrict: "V",
        textTown: "Varna",
        valTown: "Varna"
      }, {
        keyDistrict: "V",
        textTown: "Kavarna",
        valTown: "Kavarna"
      }, {
        keyDistrict: "V",
        textTown: "Balchik",
        valTown: "Balchik"
      }, {
        keyDistrict: "Y",
        textTown: "Yambol",
        valTown: "Yambol"
      }, {
        keyDistrict: "Y",
        textTown: "Kermen",
        valTown: "Kermen"
      }, {
        keyDistrict: "Y",
        textTown: "Elhovo",
        valTown: "Elhovo"
      }, {
        keyDistrict: "Y",
        textTown: "Bolyarovo",
        valTown: "Bolqrovo"
      }, ];

      $(function() {

        $("#comboCountry").igCombo({
          textKey: "txtCountry",
          valueKey: "valCountry",
          dataSource: dsCountry,
          selectionChanged: function(evt, ui) {
            var filteredCascDistrict = [];
            if (ui.items && ui.items[0]) {
              var itemData = ui.items[0].data;
              if (itemData.valCountry == "US") {
                $("#state").css("display", "none");
                $("#district").css("display", "block");
              } else {
                $("#state").css("display", "none");
                $("#district").css("display", "block");
              }

              filteredCascDistrict = dsCascDistrict.filter(function(district) {
                return district.keyCountry == itemData.valCountry;
              });
            }

            var $comboDistrict = $("#comboDistrict");
            $comboDistrict.igCombo("deselectAll", {}, true);
            $comboDistrict.igCombo("option", "dataSource", filteredCascDistrict);
            $comboDistrict.igCombo("dataBind");

            var disableChildCombo = filteredCascDistrict.length == 0;
            $comboDistrict.igCombo("option", "disabled", disableChildCombo);
          },
          itemsRendered: function(evt, ui) {
            ui.owner.deselectAll();
          }
        });

        $("#comboDistrict").igCombo({
          valueKey: "valDistrict",
          textKey: "txtDistrict",
          dataSource: [],
          disabled: true,
          filteringCondition: "startsWith",
          multiSelection: {
            enabled: true
          },
          selectionChanged: function(evt, ui) {
            var filteredCascTown = [];

            if (ui.items && ui.items[0]) {
              var itemData = ui.items[0].data;

              var filteredCascTown = dsCascTowns.filter(function(town) {
                return town.keyDistrict == itemData.valDistrict;
              });
            }

            var $comboTown = $("#comboTown");
            $comboTown.igCombo("deselectAll");
            $comboTown.igCombo("option", "dataSource", filteredCascTown);
            $comboTown.igCombo("dataBind");

            var disableChildCombo = filteredCascTown.length == 0;
            $comboTown.igCombo("option", "disabled", disableChildCombo);
          }
        });

        $("#comboTown").igCombo({
          valueKey: "valTown",
          textKey: "textTown",
          disabled: true
        });



        $("#comboTable").igCombo({
         valueKey: "value",
         textKey: "value",
         dataSource: getProductForCombo()
        });

        function getProductForCombo()
        {
         var array_return = [];

         $(".table__product td:nth-child(1)").each(function(){
          array_return.push({ "value" : $(this).html() });
         });

         return array_return;
        }

        getProductForCombo();
      });
    });
  </script>
</head>

<body>
<table class="table__product">
  <tr>
    <th>Product</th>
    <th>Chargetype</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
  <div class="group-container overHidden" id="before">
    <IFRAME class="frame" id=iframe1 name="iframe1" style="display: none" src="about:blank"></IFRAME>
    <form method="post" target="iframe1" action="SubmitToSomeFile" id="frm" accept-charset=UTF-8 name="frm">
      <div class="overHidden">
       <div class="comboTable">
          <div>Table</div>
          <span id="comboTable"></span>
        </div>

        <div class="comboGroup">
          <div>Product</div>
          <span id="comboCountry"></span>
        </div>
        <div class="comboGroup2">
          <div id="state">
            <br />
          </div>
          <div id="district">ChargeType</div>
          <span id="comboDistrict"></span>
        </div>
        <!-- <div class="comboGroup">
                <div>Town</div>
                <span id="comboTown"></span>
            </div> -->
      </div>
      <br>
      <br>
      <INPUT type="submit" class="button" name="submit" value="Run" id=button2 onClick="_submit_form();">
    </form>
    <!-- frame goes here -->
  </div>
  <div id="after" style="width:99%;border:gray 1px solid;display:none;background-color:#ccc;Padding:5px;height:100px;">Thank you</div>
  <!-- Some Content After the form. -->
  <script language="JavaScript">
    function _submit_form(){
    /**** To hide and display frame ****/
   /* document.getElementById('before').style.display = 'none'; */
  /*  document.getElementById('after').style.display = 'block'; */
    var text1 = $("#comboCountry").igCombo("text");
    var text2 = $("#comboDistrict").igCombo("text");
 
 /* To handle text for one or multiple chargetypes */
    if (text2.indexOf(',') >= 0) {
    document.getElementById("after").innerHTML = "Your Product is " + text1 + "! Your ChargeTypes are " + text2;
} else {
    document.getElementById("after").innerHTML = "Your Product is " + text1 + "! Your ChargeType is " + text2;
    
}
 return true
}
  </script>
</body>

</html>

Answer 3

我编辑了您的代码，这应该可以。

<html>
<head>
  <script src="http://igniteui.com/js/modernizr.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
  <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
  <script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
  <link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
  <link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>
  <style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
  <script>
    $(function() {
      var dsCountry, dsCascTowns, dsCountryCascading,
        dsCountryCascading, dsStatesUSCascading, dsChargetypeBGCascading;
  
 var array_return1 = []; 
  
  function getchargetypeForCombo()
        {


$(".table__product tr").each(function() {
  var td = $('td', this),
      productitems = td.eq(0).text(),
      productId = td.eq(1).text();

  array_return1.push({
    Product: productitems,
    Chargetype: productId
  });

});

 return array_return1;
        }

        getchargetypeForCombo();

      dsCountry = [{
        txtCountry: "3Delta Level 3",
        valCountry: "Ta"
      }, {
        txtCountry: "Account Updater",
        valCountry: "Au"
      }, {
        txtCountry: "DCC",
        valCountry: "Dc"
      }];

      dsCascChargetype = [{
        keyCountry: "Ta",
        txtChargetype: "ALL",
        valChargetype: "AL"
      }, {
        keyCountry: "Ta",
        txtChargetype: "3336",
        valChargetype: "3336"
      }, {
        keyCountry: "Ta",
        txtChargetype: "6064",
        valChargetype: "6064"
      }, {
        keyCountry: "Ta",
        txtChargetype: "6980",
        valChargetype: "6980"
      }, {
        keyCountry: "Ta",
        txtChargetype: "6081",
        valChargetype: "6081"
      }, {
        keyCountry: "Au",
        txtChargetype: "ALL",
        valChargetype: "AL"
      }, {
        keyCountry: "Au",
        txtChargetype: "3345",
        valChargetype: "3345"
      }, {
        keyCountry: "Au",
        txtChargetype: "3346",
        valChargetype: "3346"
      }, {
        keyCountry: "Au",
        txtChargetype: "6214",
        valChargetype: "6214"
      }, {
        keyCountry: "Dc",
        txtChargetype: "ALL",
        valChargetype: "AL"
      }, {
        keyCountry: "Dc",
        txtChargetype: "40",
        valChargetype: "40"
      }];

      dsCascTowns = [{
        keyChargetype: "NJ",
        textTown: "Atlantic City",
        valTown: "AtlanticCity"
      }, {
        keyChargetype: "NJ",
        textTown: "Dover",
        valTown: "Dover"
      }, {
        keyChargetype: "CA",
        textTown: "Los Angeles",
        valTown: "LosAngeles"
      }, {
        keyChargetype: "CA",
        textTown: "San Francisco",
        valTown: "San Francisco"
      }, {
        keyChargetype: "CA",
        textTown: "San Diego",
        valTown: "SanDiego"
      }, {
        keyChargetype: "IL",
        textTown: "Chicago",
        valTown: "Chicago"
      }, {
        keyChargetype: "NY",
        textTown: "New York",
        valTown: "NewYork"
      }, {
        keyChargetype: "NY",
        textTown: "Buffalo",
        valTown: "Buffalo"
      }, {
        keyChargetype: "FL",
        textTown: "Miami",
        valTown: " Miami"
      }, {
        keyChargetype: "FL",
        textTown: "Orlando",
        valTown: "Orlando"
      }, {
        keyChargetype: "SA",
        textTown: "Sofia",
        valTown: "Sofia"
      }, {
        keyChargetype: "SA",
        textTown: "Pernik",
        valTown: "Pernik"
      }, {
        keyChargetype: "PV",
        textTown: "Plovdiv",
        valTown: "Plovdiv"
      }, {
        keyChargetype: "PV",
        textTown: "Asenovgrad",
        valTown: "Asenovgrad"
      }, {
        keyChargetype: "V",
        textTown: "Varna",
        valTown: "Varna"
      }, {
        keyChargetype: "V",
        textTown: "Kavarna",
        valTown: "Kavarna"
      }, {
        keyChargetype: "V",
        textTown: "Balchik",
        valTown: "Balchik"
      }, {
        keyChargetype: "Y",
        textTown: "Yambol",
        valTown: "Yambol"
      }, {
        keyChargetype: "Y",
        textTown: "Kermen",
        valTown: "Kermen"
      }, {
        keyChargetype: "Y",
        textTown: "Elhovo",
        valTown: "Elhovo"
      }, {
        keyChargetype: "Y",
        textTown: "Bolyarovo",
        valTown: "Bolqrovo"
      }, ];

      $(function() {

        $("#comboCountry").igCombo({
          textKey: "Product",
          valueKey: "Product",
          dataSource: getProductForCombo(),
          selectionChanged: function(evt, ui) {
            var filteredCascChargetype = [];
            if (ui.items && ui.items[0]) {
              var itemData = ui.items[0].data;
              /*if (itemData.Pvalue == "US") {
                $("#state").css("display", "none");
                $("#Chargetype").css("display", "block");
              } else {
                $("#state").css("display", "none");
                $("#Chargetype").css("display", "block");
              } */

              filteredCascChargetype = array_return1.filter(function(Chargetype) {
                return Chargetype.Product == itemData.Product;
              });
            }

            var $comboChargetype = $("#comboChargetype");
            $comboChargetype.igCombo("deselectAll", {}, true);
            $comboChargetype.igCombo("option", "dataSource", filteredCascChargetype);
            $comboChargetype.igCombo("dataBind");

            var disableChildCombo = filteredCascChargetype.length == 0;
            $comboChargetype.igCombo("option", "disabled", disableChildCombo);
          },
          itemsRendered: function(evt, ui) {
            ui.owner.deselectAll();
          }
        });

        $("#comboChargetype").igCombo({
          valueKey: "Chargetype",
          textKey: "Chargetype",
          dataSource: [],
    allowCustomValue: true,
          disabled: true,
          filteringCondition: "startsWith",
          multiSelection: {
            enabled: true
          }
    });
         /* selectionChanged: function(evt, ui) {
            var filteredCascTown = [];

            if (ui.items && ui.items[0]) {
              var itemData = ui.items[0].data;

              var filteredCascTown = dsCascTowns.filter(function(town) {
                return town.keyChargetype == itemData.valChargetype;
              });
            }

            var $comboTown = $("#comboTown");
            $comboTown.igCombo("deselectAll");
            $comboTown.igCombo("option", "dataSource", filteredCascTown);
            $comboTown.igCombo("dataBind");

            var disableChildCombo = filteredCascTown.length == 0;
            $comboTown.igCombo("option", "disabled", disableChildCombo);
          }
        });

        $("#comboTown").igCombo({
          valueKey: "valTown",
          textKey: "textTown",
          disabled: true
        });



    /*    $("#comboTable").igCombo({
         valueKey: "value",
         textKey: "value",
         dataSource: getProductForCombo() 
        }); */

  
     /*    $("#comboChargeType").igCombo({
         valueKey: "value",
         textKey: "value",
         dataSource: getProductForCombo()
        }); */
  
  
        function getProductForCombo()
        {
         var array_return = [];

         $(".table__product td:nth-child(1)").each(function(){
          array_return.push({ "Product" : $(this).html(), "valProduct" : $(this).html() });
         });

         return array_return;
        }

        getProductForCombo();
  
 
  
  
      });
    });
 
 
 
 
 
 
 
 
  </script>
</head>

<body>
<table class="table__product">
  <tr>
    <th>Product</th>
    <th>Chargetype</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>3384</td>
    <td>iPhone</td>
  </tr>
  <tr>
    <td>Samsung</td>
    <td>8800</td>
    <td>Galaxy</td>
  </tr>
  <tr>
    <td>LG</td>
    <td>8684</td>
    <td>V20</td>
  </tr>
  <tr>
    <td>Google</td>
    <td>8179</td>
    <td>Pixel</td>
  </tr>
   <tr>
    <td>Google</td>
    <td>1</td>
    <td>Pixel</td>
  </tr>
  <tr>
    <td>Blackberry</td>
    <td>4554</td>
    <td>Storm</td>
  </tr>
  <tr>
    <td>Motorolla</td>
    <td>6764</td>
    <td>Z force</td>
  </tr>
</table>
  <div class="group-container overHidden" id="before">
    <IFRAME class="frame" id=iframe1 name="iframe1" style="display: none" src="about:blank"></IFRAME>
    <form method="post" target="iframe1" action="SubmitToSomeFile" id="frm" accept-charset=UTF-8 name="frm">
      <div class="overHidden">
      <!-- <div class="comboTable">
          <div>Table</div>
          <span id="comboTable"></span>
        </div> -->
  
  <!-- <div class="comboChargeType">
          <div>ChargeType</div>
          <span id="comboChargeType"></span>
        </div> -->

        <div class="comboGroup">
          <div>Product</div>
          <span id="comboCountry"></span>
        </div>
        <div class="comboGroup2">
          <div id="state">
            <br />
          </div>
          <div id="Chargetype">ChargeType</div>
          <span id="comboChargetype"></span>
        </div>
        <!-- <div class="comboGroup">
                <div>Town</div>
                <span id="comboTown"></span>
            </div> -->
      </div>
      <br>
      <br>
      <INPUT type="submit" class="button" name="submit" value="Run" id=button2 onClick="_submit_form();">
    </form>
    <!-- frame goes here -->
  </div>
  <div id="after" style="width:99%;border:gray 1px solid;display:none;background-color:#ccc;Padding:5px;height:100px;">Thank you</div>
  <!-- Some Content After the form. -->
  <script language="JavaScript">
    function _submit_form(){
    /**** To hide and display frame ****/
   /* document.getElementById('before').style.display = 'none'; */
  /*  document.getElementById('after').style.display = 'block'; */
    var text1 = $("#comboCountry").igCombo("text");
    var text2 = $("#comboChargetype").igCombo("text");
 
 /* To handle text for one or multiple chargetypes */
    if (text2.indexOf(',') >= 0) {
    document.getElementById("after").innerHTML = "Your Product is " + text1 + "! Your ChargeTypes are " + text2;
} else {
    document.getElementById("after").innerHTML = "Your Product is " + text1 + "! Your ChargeType is " + text2;
    
}
 return true
}
  </script>
</body>

</html>

以 html table 作为数据源的级联组合框

Cascading combobox with html table as datasource

html

jquery

infragistics

ignite-ui

igcombo