opening a fancybox from a drop down box and passing the selected value to it directly

Posted by andy on Stack Overflow See other posts from Stack Overflow or by andy
Published on 2011-01-25T04:35:03Z Indexed on 2012/10/04 3:38 UTC
Read the original article Hit count: 290

<select name="mySelectboxsituation_found" id="mySelectboxsituation_found">
  <option value="100">Firecall</option>
 <option value="200">FireAlarm</option>
<option value="300">FireAlarm2</option>
<option value="400">FireAlarm4</option>
</select>

      < a href="#" class="incidenttype"  name="all" onClick="JavaScript:var  dropdown=document.getElementById('mySelectboxsituation_found');this.href='main_situation_found.php?incident_maincateid='+dropdown.options[dropdown.selectedIndex].value;return     true;"/>CLICK HERE < / a>

  function cleanUp(){
  var subsituation_found1 = $("#fancybox-        frame").contents().find('input:radio[name=incident_subcate]:checked').val();

   }
      $(".incidenttype").fancybox({
                    'width' : 900,
                   'height' : 600,
                  'autoScale': false,
                  'transitionIn': 'none',
                  'transitionOut': 'none',
                        'type': 'iframe',
                   'onCleanup': cleanUp
              );    
             });

clicking on "CLICK HERE" opens the fancybox and transfers the value selected in the drop down box.

What I would like to do is open the fancy box when i change the value in the dropdown box...without having to click on the click here link.....i know it is posisble using something like _this....but i am not sure and am looking for some direction...

ideally some thing like this ...

 <select name="mySelectboxsituation_found" id="mySelectboxsituation_found"     onChange="JavaScript:var  dropdown=document.getElementById('mySelectboxsituation_found');this.href='main_situation_found.php?incident_maincateid='+dropdown.options[dropdown.selectedIndex].value;return         true;">
   <option value="100">Firecall</option>
   <option value="200">FireAlarm</option>
   <option value="300">FireAlarm2</option>
   <option value="400">FireAlarm4</option>
     </select>

does any have an idea how to do it....

I have also tried...

function test_fan()
       { alert(document.getElementById('mySelectboxsituation_found').options[document.getElementById('mySelectboxsituation_found').selectedIndex].value);      
   var dropval =document.getElementById('mySelectboxsituation_found').options[document.getElementById('mySelectboxsituation_found').selectedIndex].value;   return dropval;
 }

  $(document).ready(function(){
   $("#autostart").fancybox({
   'onStart':test_fan,

 'width': 800,
'height': 700,
 'type': 'iframe',
 href:'main_situation_found.php?incident_maincateid='+document.getElementById('mySelectboxsituation_found').options[document.getElementById('mySelectboxsituation_found').selectedIndex].value
  });

  <a href="#" id="autostart" style="display:none"></a>
  <form><select id="mySelectboxsituation_found"        onchange="$('#autostart').trigger('click');">
  <option value="">select</option>
   <option value="100">option 1</option>
   <option value="200">trigger</option>
   <option value="300">option 3</option>
  <option value="400">option 4</option>
   </select> </form>

the really funny that happens there is that ....

on the alert id do get the value i selected so if i

selected   alert   fancybox window
100        100      nothing shows up empty
200        200      100
300        300      200
400        400      300

the fancybox seems to me the the previously selected values and i am not sure why that is happening... thanks andy

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about drop-down-menu