javascript - Function not being called after drop-down selection -


i implemented double drop-down , function calling code, , after selecting drop-down, function not being called.

the code supposed run function relevant drop-down selection. tested on normal drop-down , ran smoothly, not run on double drop-down reason.

the code outputting selection, call function.

any appreciated.

thanks!

        <!-- first select list -->     <select name="slist1" onchange="slist.getselect('slist2', this.value);">      <option>- - -</option>      <option value="amazon">amazon</option>      <option value="apple">apple</option>      <option value="keurig">keurig</option>      <option value="nike">nike</option>     </select>     <!-- tags seccond dropdown list, , text-content -->     <span id="slist2"></span> <div id="scontent"></div>      <script><!--     /* script double select dropdown list, from: coursesweb.net/javascript/ */     var slist = new object();             // js object stores data options      // here replace value text want displayed near select     var txtsl2 = '';      /*      property options seccond select list      key in object must same values of options added in first select      values in array associated each key represent options of seccond select     */     slist.slist2 = {      "amazon": ['kindle fire hd', 'kindle charger', 'kindle fire hdx'],      "apple": ['macbook', 'imac', 'iphone', 'ipad'],      "keurig": ['platinum', 'vue'],      "nike": ['fuel band']     };       /*      property text-content associated options of 2nd select list      key in object must same values (options) added in each array in "slist2" above      values of each key represent content displayed after user selects option in 2nd dropdown list     */  slist.scontent = {  "kindle fire hd": 'kindlefirehd',  "kindle charger": 'kindlecharg',  "kindle fire hdx": 'kindlefirehdx',  "macbook": 'macbook',  "imac": 'imac',  "iphone": 'iphone',  "ipad": 'ipad',  "platinum": 'platinum',  "vue": 'vue',  "fuelband": 'fuelband' };              /* here no need modify */      // function dropdown list, or content     slist.getselect = function(slist, option) {       document.getelementbyid('scontent').innerhtml = '';           // empty option-content        if(slist[slist][option]) {         // if option last select, add text-content, else, set dropdown list         if(slist == 'scontent') document.getelementbyid('scontent').innerhtml = slist[slist][option];         else if(slist == 'slist2') {           var addata = '<option>- - -</option>';           for(var i=0; i<slist[slist][option].length; i++) {             addata += '<option value="'+slist[slist][option][i]+'">'+slist[slist][option][i]+'</option>';           }            document.getelementbyid('slist2').innerhtml = txtsl2+' <select name="slist2" onchange="slist.getselect(\'scontent\', this.value);">'+addata+'</select>';         }       }       else if(slist == 'slist2') {         // empty tag 2nd select list         document.getelementbyid('slist2').innerhtml = '';       }     }      var functions = {         kindlefirehd: function(){window.alert("func1 called")},         kindlecharge: function(){window.alert("func1 called")},         kindlefirehdx: function(){window.alert("func1 called")},         macbook: function(){window.alert("func1 called")},         imac: function(){window.alert("func1 called")},         iphone: function(){window.alert("func1 called")},         ipad: function(){window.alert("func1 called")},         platinum: function(){window.alert("func1 called")},         vue: function(){window.alert("func1 called")},         fuelband: function(){window.alert("func1 called")}     }      $( "select" )       .change(function () {         var selected = $( "select option:selected" );         functions[selected.val()]();       })       .change();        </script>

your right @ have mistake @ 

   $( "select" )       .change(function () {         var selected = $( "select option:selected" );         functions[selected.val()]();       })       .change();

remove above code try below example

js

    var slist = new object();             // js object stores data options     var txtsl2 = '';      slist.slist2 = {      "amazon": ['kindle fire hd', 'kindle charger', 'kindle fire hdx'],      "apple": ['macbook', 'imac', 'iphone', 'ipad'],      "keurig": ['platinum', 'vue'],      "nike": ['fuel band']     };  slist.scontent = {  "kindle fire hd": 'kindlefirehd',  "kindle charger": 'kindlecharg',  "kindle fire hdx": 'kindlefirehdx',  "macbook": 'macbook',  "imac": 'imac',  "iphone": 'iphone',  "ipad": 'ipad',  "platinum": 'platinum',  "vue": 'vue',  "fuelband": 'fuelband' };  slist.getselect = function(slist, option) {       document.getelementbyid('scontent').innerhtml = '';           // empty option-content  if(slist[slist][option]) {         // if option last select, add text-content, else, set dropdown list         if(slist == 'scontent'){ document.getelementbyid('scontent').innerhtml = slist[slist][option]; var selected = slist[slist][option]; functions[selected](); }         else if(slist == 'slist2') {           var addata = '<option>- - -</option>';           for(var i=0; i<slist[slist][option].length; i++) {             addata += '<option value="'+slist[slist][option][i]+'">'+slist[slist][option][i]+'</option>';           }            document.getelementbyid('slist2').innerhtml = txtsl2+' <select name="slist2" onchange="slist.getselect(\'scontent\', this.value);">'+addata+'</select>';         }       }       else if(slist == 'slist2') {         // empty tag 2nd select list         document.getelementbyid('slist2').innerhtml = '';       }     }      var functions = {         kindlefirehd: function(){window.alert("func1 called")},         kindlecharge: function(){window.alert("func1 called")},         kindlefirehdx: function(){window.alert("func1 called")},         macbook: function(){window.alert("func1 called")},         imac: function(){window.alert("func1 called")},         iphone: function(){window.alert("func1 called")},         ipad: function(){window.alert("func1 called")},         platinum: function(){window.alert("func1 called")},         vue: function(){window.alert("func1 called")},         fuelband: function(){window.alert("func1 called")}     }

change

change @ if condition

   if(slist[slist][option]) {             if(slist == 'scontent'){ document.getelementbyid('scontent').innerhtml = slist[slist][option];             var selected = slist[slist][option]; // save selected value variable             functions[selected]();               // call function argument     }

jsfiddle


Comments

Post a Comment

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

i have add following code htaccess file removing .php extension , add trailing slash urls. worked fine reduced page loading speed , css code not loading @ all. pages ugly. please help rewriteengine on rewritebase / ## hide .php extension snippet # externally redirect /dir/foo.php /dir/foo rewritecond %{the_request} ^[a-z]{3,}\s([^.]+)\.php [nc] rewriterule ^ %1/ [r,l] # add trailing slash rewritecond %{request_filename} !-f rewritecond %{request_uri} !/$ rewriterule . %{request_uri}/ [l,r=301] # internally forward /dir/foo /dir/foo.php rewritecond %{request_filename} !-d rewritecond %{request_filename}.php -f rewriterule ^(.*?)/?$ $1.php [l] we can rewrite urls using .htaccess files. before writing in .htaccess files need verify kind of server using. can check server adding a <?php phpinfo(); ?> in php page. ensure mod_rewrite module enabled in apache server. can identified checking phpinfo included page. common methods used url rewriting follows ...
Read more

javascript - jQuery show full size image on click -

pretty self explanatory not workking . i want display full image when user click on image... yes know there tons of plugins but i want keep simple. any idea ? css : .full { display: none; width: 500px; height: 500px; margin-left: 100px; margin-top: -300px; position: fixed; background-color: #f00; z-index: 6; } .thumbnail { width: 50px; height: 50px; } html: <img class="thumbnail" src="http://4.bp.blogspot.com/-uhbdp2esxng/txneptvi92i/aaaaaaaaaky/upfqis7zto0/s1600/rihanna-wallpaper.jpg"> jquery: $(document).ready(function() { $('.thumbnail').on('click', function() { var img = $('<img />',{src:this.src,'class':'full'}); $('.full').html(img).show(); console.log('done!'); }); }); try looking how jquery works. $(document).ready(function() { $('.thumbnail').on('click', function(...
Read more