Question

i have two select option with some data:

<select id="S1" name="S1">
  <option value="id1">data1</option>
  <option value="id2">data2</option>
  <option value="id3">data3</option>
</select>

<select id="S2" name="S2">
  // data for selected value in S1
</select>

When i choose one option, i make a submit with the data to fill a second select option, but when i do this submit i lost the selected value of the first select option. How can i keep the selected value for the first select?

Update: i use mod_plsql, that is html languaje in a plsql procedure.

With a cursor i get the data:

CURSOR c_departamento IS
SELECT *
FROM sib_s_lugares_geograficos
WHERE tipo ='DE';

And after i fill the select one with a loop:

htp.p(' 
<select name="opt_departamento" value="'||OPT_DEPARTAMENTO||'" style="width: 135px" >');
FOR regDep IN c_departamento LOOP
htp.p(
'<option selected value="' || regDep.codigo || '">' || regDep.descripcion || '</option>');
END LOOP;
END IF;
 </select>');

I do the submit because i have another Cursor to get the data for the second select one, when i do the submit, mod_plsql call again the procedure and it paint the html, when it happen I get the correct value for the second select but i lost the value selected for the first.

Answer 1

I don’t know if this is the best way but it works.

1. Download the plugin for Jquery:

   Jquery cookie plugin

2. In the element put a onclick event, i use a input element:

   input name=”btnaccion” onclick=”setCookieDepartamento();” type=”submit” value=”ciudad”

3. It call this function, saving the value of the select in a cookie:

   function setCookieDepartamento(){
   var select = document.getElementById(“opt_departamento”);
   var valor = select.options[select.selectedIndex].value;
   $.cookie(“departamento”, valor);
   }

4. Call this function after submit, getting the value saved and setting in the select option:

   function getCookieDepartamento(){
   var departamento = $.cookie(“departamento”);
   var element = document.getElementById(“opt_departamento”);
   element.value = departamento;
   $.cookie(“departamento”, null);
   }

5. That’s All!

Before submit:

After submit: