2 level Select using JQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="/js/yui-min.js" type="text/javascript"></script>
<script src="/js/aui-base-min.js" type="text/javascript"></script>
<div id="login_area">
<select id="aui-3-1-1-194">
<option value="">---Please Select---</option>
<option value="Acer">Acer</option>
<option value="Apple">Apple</option>
<option value="AT&T">AT&T</option>
<option value="Dell">Dell</option>
<option value="HTC">HTC</option>
<option value="LG">LG</option>
<option value="Motorola">Motorola</option>
<option value="Nokia">Nokia</option>
<option value="Novatel Wireless">Novatel Wireless</option>
<option value="Option">Option</option>
<option value="Pantech">Pantech</option>
<option value="Palm">Palm</option>
<option value="RIM">RIM</option>
<option value="Samsung">Samsung</option>
<option value="Sharp">Sharp</option>
<option value="Sony Erricsson">Sony Ericsson</option>
<option value="Other">Other</option>
</select> <select id="aui-3-1-1-199"></select>
<input class="go_btn" id="device_go" type="submit" value="" /></div>
<script type="text/javascript">
jQuery(document).ready(function() {
function arrwalk(e) {
for ( var i = 0; i < e.length; i++) {
jQuery('#aui-3-1-1-199').append(
jQuery('<option></option>').val(e[i])
.html(e[i]));
}
}
var acer = [ '--Please Select--', 'Aspire' ];
var apple = [ '--Please Select--', 'iPhone 3GS', 'iPhone 4','iPad' ];
var dell = [ '--Please Select--', 'Aero', 'Inspiron Mini' ];
var htc = [ '--Please Select--', 'Aria (A636)', 'Tilt 2', 'Surround' ];
var lg = [ '--Please Select--', 'Adrenaline', 'Encore 550', 'Neon', 'Quantum', 'Vu Plus' ];
var motorola = [ '--Please Select--', 'Backflip MB300', 'Bravo', 'Flipout', 'Flipside' ];
var nokia = [ '--Please Select--', '2330', '2720', '6350' ];
var novatel = [ '--Please Select--', 'Mifi 2372' ];
var option = [ '--Please Select--', 'Velocity' ];
var palm = [ '--Please Select--', 'Pixi Plus', 'Pre Plus' ];
var pantech = [ '--Please Select--', 'Breeze II P2000','Impact P7000', 'Link P7040', 'Pursuit P9020' ];
var rim = [ '--Please Select--', 'Curve 8520', 'Curve 8900', 'Pearl 3G', 'Curve 9300', 'Bold 9700', 'Torch 9800' ];
var samsung = [ '--Please Select--', 'Captivate i897', 'Go N310', 'Jack', 'SGH-A777', 'Flight A797', 'Focus SGH-i917', 'Galaxy Tab', 'Impression', 'Mythic A897', 'Rugby II A847', 'Strive A687' ];
var sharp = [ '--Please Select--', 'FX' ];
var att = [ '--Please Select--', 'USB Sierra Lightning', '3G Microcell' ];
var sony = [ '--Please Select--', 'SEMC Xperia X10', 'Vivaz' ];
var other = [ '--Please Select--', 'Other' ];
jQuery('#aui-3-1-1-194').change(
function() {
jQuery('#aui-3-1-1-199').empty();
var manvalue = jQuery(
'#aui-3-1-1-194 :selected').text();
switch (manvalue) {
case "Acer":
arrwalk(acer);
break;
case "Apple":
arrwalk(apple);
break;
case "AT&T":
arrwalk(att);
break;
case "Dell":
arrwalk(dell);
break;
case "HTC":
arrwalk(htc);
break;
case "LG":
arrwalk(lg);
break;
case "Motorola":
arrwalk(motorola);
break;
case "Nokia":
arrwalk(nokia);
break;
case "Novatel Wireless":
arrwalk(novatel);
break;
case "Option":
arrwalk(option);
break;
case "Palm":
arrwalk(palm);
break;
case "Pantech":
arrwalk(pantech);
break;
case "RIM":
arrwalk(rim);
break;
case "Samsung":
arrwalk(samsung);
break;
case "Sharp":
arrwalk(sharp);
break;
case "Sony Ericsson":
arrwalk(sony);
break;
case "Other":
arrwalk(other);
break;
}
});
jQuery('#aui-3-1-1-199').change(
function() {
var phone = jQuery(
'#aui-3-1-1-194 :selected')
.text()
+ jQuery(
'#aui-3-1-1-199 :selected')
.text();
var prodId = "";
var phoneUrl = "";
var articleId = "a_id/6579/c/277";
var phoneImage = "";
switch (phone) {
case "DellAero":
case "OtherOther":
break;
default:
break;
}
jQuery('#hurl').val(phoneUrl);
:selected').text());
jQuery('#hmodel').val(jQuery('#aui-3-1-1-199 :selected').text());
});
});
</script>
</form>
</div>
<%
} else {
%>
<div id="login_area">
<form id="success" action="https://blabla"
method="post" class="success">
<div id="choose_device">
<div class="entry_text"><em>Please choose the enrolled
device.<img alt="" class="tooltip_trigger"
src="/mts-theme/images/mts/tooltip_icon.jpg"
style="width: 18px; height: 18px;" /></em>
<div class="tooltip"></a></em></div>
</div>
<select id="aui-3-1-1-194">
<option value="<%=make%>" selected="selected"><%=make%></option>
<option value="">---Please Select---</option>
</select> <select id="aui-3-1-1-199">
<option value="<%=model%>" selected="selected"><%=model%></option>
<option value="">---Please Select---</option>
</select> <input class="go_btn" id="device_go" type="submit" value="" /></div>
</form>
</div>
<body onLoad="call()">
</body>
<%
}
%>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="/js/yui-min.js" type="text/javascript"></script>
<script src="/js/aui-base-min.js" type="text/javascript"></script>
<div id="login_area">
<select id="aui-3-1-1-194">
<option value="">---Please Select---</option>
<option value="Acer">Acer</option>
<option value="Apple">Apple</option>
<option value="AT&T">AT&T</option>
<option value="Dell">Dell</option>
<option value="HTC">HTC</option>
<option value="LG">LG</option>
<option value="Motorola">Motorola</option>
<option value="Nokia">Nokia</option>
<option value="Novatel Wireless">Novatel Wireless</option>
<option value="Option">Option</option>
<option value="Pantech">Pantech</option>
<option value="Palm">Palm</option>
<option value="RIM">RIM</option>
<option value="Samsung">Samsung</option>
<option value="Sharp">Sharp</option>
<option value="Sony Erricsson">Sony Ericsson</option>
<option value="Other">Other</option>
</select> <select id="aui-3-1-1-199"></select>
<input class="go_btn" id="device_go" type="submit" value="" /></div>
<script type="text/javascript">
jQuery(document).ready(function() {
function arrwalk(e) {
for ( var i = 0; i < e.length; i++) {
jQuery('#aui-3-1-1-199').append(
jQuery('<option></option>').val(e[i])
.html(e[i]));
}
}
var acer = [ '--Please Select--', 'Aspire' ];
var apple = [ '--Please Select--', 'iPhone 3GS', 'iPhone 4','iPad' ];
var dell = [ '--Please Select--', 'Aero', 'Inspiron Mini' ];
var htc = [ '--Please Select--', 'Aria (A636)', 'Tilt 2', 'Surround' ];
var lg = [ '--Please Select--', 'Adrenaline', 'Encore 550', 'Neon', 'Quantum', 'Vu Plus' ];
var motorola = [ '--Please Select--', 'Backflip MB300', 'Bravo', 'Flipout', 'Flipside' ];
var nokia = [ '--Please Select--', '2330', '2720', '6350' ];
var novatel = [ '--Please Select--', 'Mifi 2372' ];
var option = [ '--Please Select--', 'Velocity' ];
var palm = [ '--Please Select--', 'Pixi Plus', 'Pre Plus' ];
var pantech = [ '--Please Select--', 'Breeze II P2000','Impact P7000', 'Link P7040', 'Pursuit P9020' ];
var rim = [ '--Please Select--', 'Curve 8520', 'Curve 8900', 'Pearl 3G', 'Curve 9300', 'Bold 9700', 'Torch 9800' ];
var samsung = [ '--Please Select--', 'Captivate i897', 'Go N310', 'Jack', 'SGH-A777', 'Flight A797', 'Focus SGH-i917', 'Galaxy Tab', 'Impression', 'Mythic A897', 'Rugby II A847', 'Strive A687' ];
var sharp = [ '--Please Select--', 'FX' ];
var att = [ '--Please Select--', 'USB Sierra Lightning', '3G Microcell' ];
var sony = [ '--Please Select--', 'SEMC Xperia X10', 'Vivaz' ];
var other = [ '--Please Select--', 'Other' ];
jQuery('#aui-3-1-1-194').change(
function() {
jQuery('#aui-3-1-1-199').empty();
var manvalue = jQuery(
'#aui-3-1-1-194 :selected').text();
switch (manvalue) {
case "Acer":
arrwalk(acer);
break;
case "Apple":
arrwalk(apple);
break;
case "AT&T":
arrwalk(att);
break;
case "Dell":
arrwalk(dell);
break;
case "HTC":
arrwalk(htc);
break;
case "LG":
arrwalk(lg);
break;
case "Motorola":
arrwalk(motorola);
break;
case "Nokia":
arrwalk(nokia);
break;
case "Novatel Wireless":
arrwalk(novatel);
break;
case "Option":
arrwalk(option);
break;
case "Palm":
arrwalk(palm);
break;
case "Pantech":
arrwalk(pantech);
break;
case "RIM":
arrwalk(rim);
break;
case "Samsung":
arrwalk(samsung);
break;
case "Sharp":
arrwalk(sharp);
break;
case "Sony Ericsson":
arrwalk(sony);
break;
case "Other":
arrwalk(other);
break;
}
});
jQuery('#aui-3-1-1-199').change(
function() {
var phone = jQuery(
'#aui-3-1-1-194 :selected')
.text()
+ jQuery(
'#aui-3-1-1-199 :selected')
.text();
var prodId = "";
var phoneUrl = "";
var articleId = "a_id/6579/c/277";
var phoneImage = "";
switch (phone) {
case "DellAero":
case "OtherOther":
break;
default:
break;
}
jQuery('#hurl').val(phoneUrl);
:selected').text());
jQuery('#hmodel').val(jQuery('#aui-3-1-1-199 :selected').text());
});
});
</script>
</form>
</div>
<%
} else {
%>
<div id="login_area">
<form id="success" action="https://blabla"
method="post" class="success">
<div id="choose_device">
<div class="entry_text"><em>Please choose the enrolled
device.<img alt="" class="tooltip_trigger"
src="/mts-theme/images/mts/tooltip_icon.jpg"
style="width: 18px; height: 18px;" /></em>
<div class="tooltip"></a></em></div>
</div>
<select id="aui-3-1-1-194">
<option value="<%=make%>" selected="selected"><%=make%></option>
<option value="">---Please Select---</option>
</select> <select id="aui-3-1-1-199">
<option value="<%=model%>" selected="selected"><%=model%></option>
<option value="">---Please Select---</option>
</select> <input class="go_btn" id="device_go" type="submit" value="" /></div>
</form>
</div>
<body onLoad="call()">
</body>
<%
}
%>
No comments:
Post a Comment