Question

我有以下选择字段和一些输入字段。

选择字段[id =＆＃34;主题＆＃34;]是 PARENT 。当价值＆＃34;订单相关＆＃34;如果选中，它会触发一个选择字段[id =＆＃34; OrderRelatedSelect＆＃34;]和文本字段[id =＆＃34; OrderNo＆＃34;]。

这[id =＆＃34; OrderRelatedSelect＆＃34;]进一步触发其他一些字段。当值＆＃34; ReturnExchange＆＃34;已选中，会触发一个文字字段[id =＆＃34; ProductCode＆＃34;]和选择字段[id =＆＃34; ReturnTypeSelect＆＃34;] 。

这就是问题所在。一旦值＆＃34; ReturnExchange＆＃34;即使我们更改 PARENT 选择字段的选项值，此选择字段[id =＆＃34; ReturnTypeSelect＆＃34;]也会显示在所有其他 PARENT 选项。只有当我们恢复到Order Selected并将[id =＆＃34; OrderRelatedSelect＆＃34;]的值更改为其他值时，才能禁用它。如何解决此问题，以便[id =＆＃34; ReturnTypeSelect＆＃34;]仅在 PARENT 选项值为＆＃34;订单相关＆＃34;。

时显示

这是我使用的代码 -

<select id="subject" required="required">
        <option value="" disabled="disabled" selected="selected">Please select a Subject</option>
        <option value="Order Related">Order Related</option>
        <option value="Product Related">Product Related</option>
        <option value="Store Related">Store Related</option>
        <option value="Media Related">Media Related</option>
        <option value="Kollab Requests">Kollab Requests</option>
        <option value="Other Inquiry">Other Inquiry</option>
    </select>

        <select id="OrderRelatedSelect" style="display:none" required="required">
        <option value="" disabled="disabled" selected="selected">Please select a Subject</option>
        <option value="OrderStatus">Order Status</option>
        <option value="ReturnExchange">Request a Return/Exchange</option>
        <option value="Store Related">Shipping Information</option>
        </select>

        <input type="text" id="OrderNo" placeholder="Enter Order #" style="display:none" required="required">
        <input type="text" id="ProductCode" placeholder="Enter Product Code (Separate multiple products with commas)" style="display:none" required="required">
        <input type="text" id="OtherInquiry" placeholder="Enter Subject" style="display:none" required="required">

        <select id="ReturnTypeSelect" style="display:none" required="required">
        <option value="" disabled="disabled" selected="selected">Please select a Return Type</option>
        <option value="Refund">Refund</option>
        <option value="Exchange">Exchange</option>
        </select>

      <script>
        $('#subject').on('change',function(){
  var selection = $(this).val(); 
  console.log("Detected change..." + selection);
  $("#OrderRelatedSelect").toggle($(this).val()=="Order Related");
  $("#OrderNo").toggle($(this).val()=="Order Related");
  $("#ProductCode").toggle($(this).val()=="Product Related");
  $("#OtherInquiry").toggle($(this).val()=="Other Inquiry");
        });

        $('#OrderRelatedSelect').on('change',function(){
  var selection = $(this).val(); 
  console.log("Detected change..." + selection);
  $("#ProductCode").toggle($(this).val()=="ReturnExchange");
  $("#ReturnTypeSelect").toggle($(this).val()=="ReturnExchange");
        });

      </script>

编辑：修改后的代码

这是我现在运行的脚本而不是上面的内容。在内部嵌套了一个切换.QuicklationRelatedSelect onchange函数。

<script>
        $('#subject').on('change',function(){
  var selection = $(this).val(); 
  console.log("Detected change..." + selection);
  $("#OrderRelatedSelect").toggle($(this).val()=="Order Related");
  $("#OrderNo").toggle($(this).val()=="Order Related");
  $("#ProductCode").toggle($(this).val()=="Product Related");
  $("#OtherInquiry").toggle($(this).val()=="Other Inquiry");
        });

        $('#OrderRelatedSelect').on('change',function(){
  var selection = $(this).val(); 
  console.log("Detected change..." + selection);
  $("#ProductCode").toggle($(this).val()=="ReturnExchange");
  $("#ReturnTypeSelect").toggle($(this).val()=="ReturnExchange");

          // Toggle off ReturnTypeSelect
          $('#subject').on('change',function(){
    var selection = $(this).val(); 
    console.log("Detected change..." + selection);
    $("#ReturnTypeSelect").toggle($(this).val()=="Order Related");
          });
        });

      </script>

当选择字段选项触发另一个选择字段时，修复表单中的错误

0 个答案: