JSFiddle - React, Tailwind, and code Playground

by Salvatore Rotondo

HTML

<p>L'url dell'iframe sarà..</p>
<div id="src-iframe">&nbsp;</div>
<p class="testo"> Seleziona la Folder : </p>
<select name="IDFolder"><option value=""></option><option value="110">110</option><option value="120">120</option><option value="122">122</option><option value="125">125</option><option value="126">126</option><option value="127">127</option><option value="128">128</option><option value="145">145</option><option value="146">146</option><option value="147">147</option><option value="148">148</option><option value="149">149</option><option value="150">150</option><option value="151">151</option><option value="155">155</option><option value="156">156</option><option value="160">160</option><option value="161">161</option><option value="162">162</option><option value="163">163</option><option value="164">164</option><option value="165">165</option><option value="194">194</option></select>
<p class="testo"> Selezionare la Capsule : </p>
<select name="IDCapsule"><option value=""></option><option value="001">001</option><option value="002">002</option><option value="003">003</option><option value="004">004</option><option value="005">005</option><option value="006">006</option><option value="007">007</option><option value="008">008</option><option value="009">009</option><option value="010">010</option><option value="011">011</option></select>
<p class="testo"> Selezionare il Report : </p>
<select name="IDReport"><option value=""></option><option value="000">000</option></select>

JavaScript

(function($) {
    // Base url da caricare nell'iframe
    var iFrameBaseUrl = 'estrazione.php';
    
    // Identifichiamo le select da esaminare
    var $Folder = $('select[name="IDFolder"]'),
        $Capsule = $('select[name="IDCapsule"]'),
        $Report = $('select[name="IDReport"]');
    
    // Definiamo la funzione di aggiornamento della url
    function selectOnChange() {
        var params = {
            'IDFolder'  : $Folder.val(),
            'IDCapsule' : $Capsule.val(),
            'IDReport'  : $Report.val(),
            'time'      : new Date().getTime()
        };
        
        // Chiaramente è un esempio per mostrare a video la url prodotta
        $('#src-iframe').html(iFrameBaseUrl +'?'+ $.param(params));
        
        /* 
         * Questo potrebbe essere il codice che cambia 
         * sul serio la url di un iframe
             
         $('iframe').attr('src', iFrameBaseUrl +'?'+ $.param(params));
             
        */
    }
    
    // Assegnamo la funzione all'evento onchange di ciascuna select
    $Folder.change(selectOnChange);
    $Capsule.change(selectOnChange);
    $Report.change(selectOnChange);
    
})(jQuery);