Question

我在RMA的前端表单中有一个下拉列表。我想添加依赖下拉列表以更具体地描述原因。

家长下拉：

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

所有项目都将被修复。

如何使用jquery添加？

Answer 1

我达到了预期的行为。在代码中，我使用基于父下拉列表中选择的值的内容来休息表单。

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

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

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

请查看示例代码。 CodePen

Answer 2

您需要为每个选择框添加父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>

使用html＆amp; amp;添加相关选择框jQuery的？

2 个答案: