小贝子编程

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



我有一些代码可以用来过滤一些用户选择，但是我想使用现有的html表作为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>

不能将igCombo绑定到 HTML 表。组合支持绑定到的唯一 DOM 元素是 HTML 选择。但是，您可以创建一个新的 $.ig.DataSource 对象，将其绑定到 HTML 表，然后通过为其提供要绑定到的数据的textKey和valueKey，将其用作组合的数据源。这仍然无法完成级联方案，因为您需要将数据分成您想要用于其他组合的不同组，具体取决于第一个组合选择。

我编辑了你的代码，这应该可以工作。 

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

您不能将igCombo绑定到 HTML 表，但您可以使用该表和 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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium