提交后，Html选择选项丢失数据

Question

我有两个带有一些数据的选择选项：

<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>

当我选择一个选项时，我使用数据进行提交以填充第二个选择选项，但是当我这样做时，我丢失了第一个选择选项的选定值。如何保留第一个选择的选定值？

更新：我使用的是mod_plsql，即plsql程序中的html languaje。

使用光标我得到数据：

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

然后我用循环填充选择的那个：

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>');

我执行提交，因为我有另一个Cursor来获取第二个选择的数据，当我执行提交时，mod_plsql再次调用该过程并绘制html，当它发生时我得到第二个的正确值选择但我丢失了为第一个选择的值。

Answer 1

使用您选择的服务器端语言，您需要将selected="selected"属性添加到所选的S1选项中。

例如，如果用户选择id2，则输出此HTML：

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

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

在PHP中，你可以这样做：

<?php $s1 = isset($_POST["S1"]) ? $_POST["S1"] : null; ?>

<option value="id1"<?= $s1 == "id1" ? "selected" : "" ?>>data1</option>
<option value="id2"<?= $s1 == "id2" ? "selected" : "" ?>>data2</option>
<option value="id3"<?= $s1 == "id3" ? "selected" : "" ?>>data3</option>

但理想情况下，用于生成选择的代码也会输出所选属性。

我不熟悉PL / SQL，但喜欢这个应该有用：

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

Answer 2

您需要提供select元素name属性。只有具有name属性的字段才会对发送到服务器的表单数据集做出贡献。 id属性不会影响这一点。如果您愿意，可以对两个属性使用相同的值，例如

<select id="S1" name="S1">

Answer 3

我不知道这是否是最佳方式，但它有效。

1. 下载Jquery插件：

   Jquery cookie plugin

2. 在放置onclick事件的元素中，我使用了一个输入元素：

     

   输入name =“btnaccion”onclick =“setCookieDepartamento（）;” type =“submit”value =“ciudad”

3. 调用此函数，将select值保存在cookie中：

     

   function setCookieDepartamento（）{
     var select = document.getElementById（“opt_departamento”）;
     var valor = select.options [select.selectedIndex] .value;   $ .cookie（“departamento”，valor）;   }

4. 提交后调用此函数，保存值并在选择选项中进行设置：

     

   function getCookieDepartamento（）{        var departamento = $ .cookie（“departamento”）;        var element = document.getElementById（“opt_departamento”）;        element.value = departamento;        $ .cookie（“departamento”，null）;     }

5. 这就是全部！

提交前：

提交后