Saturday, February 26, 2011

2 level Select using JQuery

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

No comments:

Post a Comment