Question

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

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

当从下拉菜单中选择buss时，＃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>

相同的所有其他选项会根据第一个下拉菜单中选择的内容而改变。提交表单后，将处理结果并显示结果表。但是，如果用户点击编辑按钮返回并编辑他们的选择，则保存第一个下拉菜单中的选项（假设总线），但选项总线＃2 <的下拉菜单 #div 中的/ strong>（ buss_type 和 bus_seats ）将替换为摩托车＃1 的选项（< strong> moto_type ）这是不正确的。我明白为什么会发生这种情况，我无法找到的是如何向用户展示他们正确的表格选择。当用户返回到表单进行编辑时，如何为主下拉菜单中的每个值显示正确的子选项？任何帮助表示赞赏！

其他问题：

如何在辅助下拉菜单中保留正确的选择，以便它们不会切换回默认值=“1”？

Answer 1

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

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

$(document).ready(function () {

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

});

请注意，您附加了更改事件处理程序，并在此之后立即调用它。这确保了它将加载页面加载和更改。

Answer 2

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

我在asp中有类似动态显示的div。我有一个完成工作的函数，我在最初加载窗体时为onchange和函数调用函数。

如何通过动态更改选项保持表单中的正确选择？

2 个答案: