如何通过动态变化的选项保持正确的选择形式？答案

【问题标题】：How to keep the correct selection in form with dynamically changing options?如何通过动态变化的选项保持正确的选择形式？
【发布时间】：2011-04-15 17:44:41
【问题描述】：

我有以下问题。我制作了一个表单，它可以根据选择的选项动态更改表单元素。这是一个简短的例子：

<select name="vehicle" id="vehicle" onchange="$('#div').load('data.php?vehicle='+this.value);"> 
      <option value="1"> motorcycle</option>
      <option value="2">buss</option>
      <option value="3"> truck </option>
      <option value="4">. . .</option>
</select>
<div id="div">
<select name="moto_type" id="moto_type">
      <option value="1">Ducati</option>
      <option value="2">Yamaha</option>
      <option value="3">Kawasaki</option>
      <option value="4">. . . </option>
</select>
</div>

当从下拉菜单中选择总线时，#div 的内容将替换为总线可用的选项，例如：

<select name="bus_type" id="bus_type">
       <option value="1">A-type</option>
       <option value="2">B-type</option>
       <option value="3">C-type</option>
       <option value="4">. . .</option>
</select>
<select name="bus_seats" id="bus_seats">
       <option value="1">10</option>
       <option value="2">20</option>
       <option value="3">50</option>
       <option value="4">. . .</option>
</select>

同样，所有其他选项都会根据第一个下拉菜单中的选择而改变。提交表格后，将处理结果并显示结果表。但是，如果用户点击编辑按钮返回并编辑他们的选择，第一个下拉菜单中的选择将被保存（例如 bus），但选项 bus #2#div 中的 /strong>（buss_type 和 bus_seats）被替换为 motorcycle #1 的选项（moto_type) 这是不正确的。我理解为什么会这样，但我不知道如何向用户展示他们正确的表单选择。当用户返回表单进行编辑时，如何在主下拉菜单中为每个值显示正确的子选项？任何帮助表示赞赏！

其他问题：

如何在二级下拉菜单中保持正确的选择，以免它们切换回默认值 =”1”？

【问题讨论】：

什么是“编辑按钮”？你能提供更多的代码来看看你在做什么吗？
@Nobita：提交表单后，用户可以选择返回并更改选择，因此是“编辑按钮”。

标签： php javascript html

【解决方案1】：

不要使用内联事件处理程序，它们只会让您头疼...它们不灵活，并且不允许您将语义标记和行为分开。

相反，做这样的事情（你可以把它放在 script 标记中，就在 body 之前，最好是与所有其他 JS 放在一个单独的文件中）：

$(document).ready(function () {

  $('#vehicle').change(function () {
    $('#div').load('data.php?vehicle='+$(this).val());
  }).change();

});

请注意，您附加了更改事件处理程序，然后您也立即调用它。这确保它会在页面加载和 onchange 时加载。

【讨论】：

【解决方案2】：

还检查表单最初加载的时间，而不仅仅是下拉菜单的更改。

我在 asp 中有类似的东西，动态显示 div。我有一个可以完成工作的函数，我在 onchange 和表单最初加载时都调用了该函数。

【讨论】：