Charger le cadre sur la sélection

-1

Le code HTML suivant fonctionne comme prévu. Ce dont j'ai besoin est une option déroulante où l'utilisateur sélectionnera n'importe quelle plate-forme et le cadre droit chargera le fichier requis. Le html suivant génère l'option déroulante mais comment faire pour que les pages requises se chargent automatiquement?Charger le cadre sur la sélection

<a href="android.html" target="dynamic"> android form </a> 
<a href="J2ME.html" target="dynamic"> J2ME form </a> 
<a href="windows.html" target="dynamic"> windows form </a>

<form> 
Platform: 
<select name='platform'> 
<option>Android </option> 
<option> J2ME </option> 
<option> Windows </option> 

</select> 
</form>

Source

2012-04-09 shantanuo

  <html> 
      <head> 
      <script type="text/javascript"> 
      function loadFrame() 
      { 
      var s=document.getElementById("platform").value; 

      document.getElementById("loadContainer").innerHTML="" 
      var iframe = document.createElement("iframe"); 
      iframe.src = s; 
      document.getElementById("loadContainer").appendChild(iframe); 
      } 
      </script> 
      </head> 
      <body> 

      <div style="float:left"> 
      <form> 
       Platform: 
       <select id='platform' onchange="loadFrame()"> 
        <option value="android.html">Android</option> 
        <option value="J2ME.html">J2ME</option> 
        <option value="Windows.html">Windows</option> 
       </select> 
      </form> 
      </div> 

      <div id="loadContainer" style="float:right"></div> 
      </body> 
      </html>

Source

2012-04-09 10:11:15 srini

Vous pouvez essayer cette variante:

D'abord, des valeurs pour vos options comme celui-ci et définir l'événement onchange pour l'élément de sélection:

<form> 
Platform: 
<select name='platform' onchange='loadFrame(this)' id='OSList'> 
    <option value="1.html">Android</option> 
    <option value="2.html">J2ME</option> 
    <option value="3.html">Windows</option> 
</select> 
</form> 
<div id="loadContainer"></div>

En second lieu, créer une fonction, que crée un iFrame avec le src obtenu à partir de la valeur de l'option sélectionnée et l'ajoute quelque part (comme à div # loadContainer):

function loadFrame(comboBox) 
{ 
    var frame = document.createElement("iframe"); 
    frame.src = comboBox.options[comboBox.selectedIndex].value; 
    var container = document.getElementById("loadContainer"); 
    container.innerHTML = ""; 
    container.appendChild(frame); 
}

Regardez l'exemple here

Si vous êtes en mesure d'utiliser jQuery (ou d'autres cadres que vous pouvez lier à la sélection événement onchange de telle manière par JS):

var el = $("#OSList"); 
el.change(function() { 
    var frame = document.createElement("iframe"); 
    frame.src = el.val(); 
    $("#loadContainer").empty().append(frame) 
});

Exemple here

Source

2012-04-09 09:14:44

Je recommande d'utiliser un système plus contraignant que celui défini dans le code HTML, via quelque chose comme jQuery. –

  <html> 
      <head> 
      <script type="text/javascript"> 
      function loadFrame() 
      { 
      var select_value=document.getElementById("platform").value; 

      window.location =select_value; 
      } 
      </script> 
      </head> 
      <body> 

      <form> 
       Platform: 
       <select id='platform' onchange="loadFrame()"> 
        <option value="andriod.html">Android</option> 
        <option value="j2me.html">J2ME</option> 
        <option value="windows.html">Windows</option> 
       </select> 
      </form> 

      </body> 
      </html>

Source

2012-04-09 09:58:39 srini

Vous pouvez ajouter un cadre vide dans votre page et modifier directement son src, il n'est pas nécessaire d'extraire le contenu html, comme ci-dessous:

<html> 
     <head> 
     <script type="text/javascript"> 
     function loadFrame(comboBox) 
     { 
     var frame = window.frames['platformFrame'], 
      src = comboBox.options[comboBox.selectedIndex].value; 
      frame.window.location.href = src; //use window.location to avoid browser capability. 
     } 
     </script> 
     </head> 
     <body> 

     <form> 
      Platform: 
      <select id='platform' onchange="loadFrame()"> 
       <option value="andriod.html">Android</option> 
       <option value="j2me.html">J2ME</option> 
       <option value="windows.html">Windows</option> 
      </select> 
     </form> 
     <iframe src="" id="platformFrame"></iframe> 
     </body> 
     </html>

Source

2012-04-09 10:09:01

Charger le cadre sur la sélection

Répondre

Questions connexes