使用html添加从属选择框&；Jquery？

我有军事革命前端表格的下拉列表。我想添加dependent下拉列表，以便更具体地描述原因

父下拉列表：

<select type="select" name="reason_id" id="reason_id" title="Choose Reason" class="validate-select required-entry">
    <option value="">Please select reason</option>
    <option value="1">Defective</option>
    <option value="2">Wrong Item</option>
    <option value="3">Damaged in Transit</option>
    <option value="5">Return</option>
    <option value="4">Other</option>
</select>

请选择原因
有缺陷的
错项
运输途中损坏
返回
其他

现在我想添加第二个关于更改父项的下拉列表选项

例如：我正在从父下拉列表中选择“缺陷”选项，然后将显示以下选项：

<select type="select" name="reason_id" id="reason_id" title="Choose Reason" class="validate-select required-entry">
    <option value="">Please select reason</option>
    <option value="1">Did not Fit</option>
    <option value="2">Stopped working after a certain time</option>
    <option value="3">Other</option>
</select>

<select type="select" name="reason_id" id="reason_id" title="Choose Reason" class="validate-select required-entry">
    <option value="">Please select reason</option>
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
</select>

请选择原因
不合适
一段时间后停止工作
其他

例如：当我从父下拉列表中选择“错误项”时，将显示以下选项：

<select type="select" name="reason_id" id="reason_id" title="Choose Reason" class="validate-select required-entry">
    <option value="">Please select reason</option>
    <option value="1">Did not Fit</option>
    <option value="2">Stopped working after a certain time</option>
    <option value="3">Other</option>
</select>

<select type="select" name="reason_id" id="reason_id" title="Choose Reason" class="validate-select required-entry">
    <option value="">Please select reason</option>
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
</select>

请选择原因
测试1
测试2
测试3

所有项目都将被修复

---

如何使用jquery添加？

我实现了预期的行为。 在代码中，我根据父下拉列表中选择的值，将表单与内容放在一起

如果用户选择缺陷选项，则会显示缺陷原因

 $("#reason_id").on("change", function(){
        var selected = $(this).val();
        if($(this).val()==1){
          $("#reason_form").html('');
          $("#reason_form").html(defectiveHTML);
        }
      });

如果选择的值为1，我将使用子下拉列表更改表单的内容

请查找示例代码。

---

我达到了预期的行为。 在代码中，我根据父下拉列表中选择的值，将表单与内容放在一起

如果用户选择缺陷选项，则会显示缺陷原因

 $("#reason_id").on("change", function(){
        var selected = $(this).val();
        if($(this).val()==1){
          $("#reason_form").html('');
          $("#reason_form").html(defectiveHTML);
        }
      });

如果选择的值为1，我将使用子下拉列表更改表单的内容

请查找示例代码。

---

您需要为每个选择框添加父div:

<script type="text/javascript">
   Event.observe(document, 'dom:loaded', function(event) {
        if ($('reason_id').value === '1') {
            $('defective_dependent').show();
        }
        if ($('reason_id').value === '2') {
            $('wrong_item_dependent').show();
        }
        if ($('reason_id').value === '5') {
            $('return_dependent').show();
        }
        ............
        ............
        ............
        Event.observe($('reason_id'), 'change', function(event){
            if ($('reason_id').value === '1') {
                    $('defective_dependent').show();
                }else {
                    $('defective_dependent').hide();
                }
                if ($('reason_id').value === '2') {
                    $('wrong_item_dependent').show();
                }else {
                    $('wrong_item_dependent').hide();
                }
                if ($('reason_id').value === '5') {
                    $('return_dependent').show();
                }else {
                    $('return_dependent').hide();
                }
                .....................
                .....................
                .....................
            });
        });
</script>

观察（文档'dom:loaded'，函数（事件）{
如果（$（'reason_id'）。值=='1'）{
$（'defective_dependent'）.show（）；
}
如果（$（'reason_id'）。值=='2'）{
$（'error_item_dependent'）。show（）；
}
如果（$（'reason_id'）。值=='5'）{
$（'return_dependent'）.show（）；
}
............
............
............
观察（$（'reason_id'），'change'，函数（事件）{
如果（$（'reason_id'）。值=='1'）{
$（'defective_dependent'）.show（）；
}否则{
$（'defective_dependent'）.hide（）；
}
如果（$（'reason_id'）。值=='2'）{
$（'error_item_dependent'）。show（）；
}否则{
$（'error_item_dependent'）。hide（）；
}
如果（$（'reason_id'）。值=='5'）{
$（'return_dependent'）.show（）；
}否则{
$（'return_dependent'）.hide（）；
}
.....................
.....................
.....................
});
});

您需要为每个选择框添加父div：

<script type="text/javascript">
   Event.observe(document, 'dom:loaded', function(event) {
        if ($('reason_id').value === '1') {
            $('defective_dependent').show();
        }
        if ($('reason_id').value === '2') {
            $('wrong_item_dependent').show();
        }
        if ($('reason_id').value === '5') {
            $('return_dependent').show();
        }
        ............
        ............
        ............
        Event.observe($('reason_id'), 'change', function(event){
            if ($('reason_id').value === '1') {
                    $('defective_dependent').show();
                }else {
                    $('defective_dependent').hide();
                }
                if ($('reason_id').value === '2') {
                    $('wrong_item_dependent').show();
                }else {
                    $('wrong_item_dependent').hide();
                }
                if ($('reason_id').value === '5') {
                    $('return_dependent').show();
                }else {
                    $('return_dependent').hide();
                }
                .....................
                .....................
                .....................
            });
        });
</script>

观察（文档'dom:loaded'，函数（事件）{
如果（$（'reason_id'）。值=='1'）{
$（'defective_dependent'）.show（）；
}
如果（$（'reason_id'）。值=='2'）{
$（'error_item_dependent'）。show（）；
}
如果（$（'reason_id'）。值=='5'）{
$（'return_dependent'）.show（）；
}
............
............
............
观察（$（'reason_id'），'change'，函数（事件）{
如果（$（'reason_id'）。值=='1'）{
$（'defective_dependent'）.show（）；
}否则{
$（'defective_dependent'）.hide（）；
}
如果（$（'reason_id'）。值=='2'）{
$（'error_item_dependent'）。show（）；
}否则{
$（'error_item_dependent'）。hide（）；
}
如果（$（'reason_id'）。值=='5'）{
$（'return_dependent'）.show（）；
}否则{
$（'return_dependent'）.hide（）；
}
.....................
.....................
.....................
});
});