Каскадный комбинированный список с 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>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>Вы не можете связать igCombo в таблицу HTML. Единственный элемент DOM, к которому привязка поддерживает привязку, - это выбор HTML. Тем не менее, вы можете создать новый $.ig.DataSource объект, свяжите это с таблицей HTML, а затем используйте его в качестве источника данных для комбо, предоставив ему textKey а также valueKey данных, которые вы хотите связать с. Это все равно не выполнит каскадный сценарий, так как для этого вам нужно разделить данные на отдельные группы, которые вы хотите использовать для других ваших комбинаций, в зависимости от первого выбора комбо.
Вы не можете связать 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>