Question

我正在尝试使用基于用户选择的值的条件创建交互式Web表单。某些表单字段将显示，具体取决于在第一个字段问题中选择的值（在我的示例中，“您的办公室”）。

由于我是JavaScript的初学者，我使用的是基本的if/else语句。我正在寻找有关如何使我的逻辑更有效/更容易维护的指导。

我的问题：写这个更好的方法是什么？也许使用JavaScript对象？如果是这样，怎么样？在我的真实世界的例子中，我有超过70多个办公室，各种属性（一些办公室出版书籍，一些出版杂志，一些没有，一些全部，等等！）...所以我做了很多隐藏和揭示各种div使用CSS的元素...并且取决于用户在第一个字段中做出的选择将决定该用户将在下一个字段中看到的内容。有更好的方法来更新和维护数据吗？

注意：我无法使用数据库进行内容管理

以下是我如何接近逻辑的一个例子：

此外，还有JSFiddle以下代码：

HTML：

<div class="container">
  <form action="" id="my_form">
    <div class="row">
      <section class="form-group">
        <label for="office" class="control-label">
          <h2>Your office:</h2>
        </label>
        <select name="" id="office" class="form-control input-lg" required>
          <option value="" selected disabled>-Select-</option>
          <option value="abc">ABC</option>
          <option value="def">DEF</option>
          <option value="ghi">GHI</option>
          <option value="123">123</option>
        </select>
      </section>
    </div>

    <section id="productType" class="form-group hidden">
      <label for="productType" class="control-label">
        <h2>Product Type:</h2>
      </label>
      <div id="productsList">

        <div id="books_radio" class="radio">
          <label for="productType">
            <input type="radio" name="productType" id="books" value="books">Books
          </label>
        </div>
        <div id="magazines_radio" class="radio">
          <label for="productType">
            <input type="radio" name="productType" id="magazines" value="magazines">Magazines
          </label>
        </div>
        <div id="comics_radio" class="radio">
          <label for="productType">
            <input type="radio" name="productType" id="comics" value="comics">Comics
          </label>
        </div>
        <div class="radio">
          <label for="productType">
            <input type="radio" name="productType" id="special" value="special">Special
          </label>
        </div>

      </div><!--/#productsList -->
    </section><!--/#productType -->

   <section id="books_form" class="alert alert-success hidden">
     <a href="#" class="btn btn-info" name="books-button" role="button">Books order form</a>
   </section> 

   <section id="mag_form" class="alert alert-success hidden">
     <a href="#" class="btn btn-info" name="mag-button" role="button">Magazine order form</a>
   </section>

   <section id="comics_form" class="alert alert-success hidden">
     <a href="#" class="btn btn-info" name="comics-button" role="button">Comics order form</a>
   </section>

   <section id="special_form" class="alert alert-success hidden">
     <a href="#" class="btn btn-info" name="special-button" role="button">Special order form</a>
   </section>

   <section id="jira_jump" class="alert alert-success hidden">
     <a href="#" class="btn btn-info" name="jira-button" role="button">Your office is part of JIRA -- click now</a>
   </section>

  </form>
</div><!--/.container -->

我的JavaScript：

"use strict";

var productType = $('#my_form input:radio[name=productType]');

var books_form = $('#books_form');
var mag_form = $('#mag_form');
var comics_form = $('#comics_form');
var special_form = $('#special_form');
var jira_jump = $('#jira_jump');

var allForms = books_form.add(mag_form).add(comics_form).add(special_form).add(jira_jump);

$('#office').on('change', function() {

    var officeValue = $('#office').val();

  switch (officeValue) {
    case 'abc':
    case 'def':
        productType.prop('checked', false);//clears radio values of products
      $('#productType').removeClass('hidden'); //hide the productType parent div
      allForms.addClass('hidden'); //hide all form links
        break;
     default: 
        productType.prop('checked', false);
      $('#productType').removeClass('hidden');
      allForms.addClass('hidden');
        break;
  }

  productType.on('change', function() {

    var productValue = this.value;

    if ( (officeValue === 'abc' || officeValue === 'def') && (productValue === 'books' || productValue === 'magazines' || productValue === 'comics') ) {
        allForms.addClass('hidden');
      jira_jump.removeClass('hidden');

    } else if (productValue === 'special') {
            allForms.addClass('hidden');
        special_form.removeClass('hidden');
        jira_jump.addClass('hidden');
    } else if (productValue === 'books') {
            allForms.addClass('hidden');
        books_form.removeClass('hidden');
    } else if (productValue == 'magazines') {
        allForms.addClass('hidden');
      mag_form.removeClass('hidden');
    } else if (productValue === 'comics') {
        allForms.addClass('hidden');
        comics_form.removeClass('hidden');
    }

  }); //end producttype event

});//end office change event

Answer 1

在这种情况下，最好使用MCV / MVVM框架。 MVC / MVVM框架可以帮助您在视图，数据和逻辑之间进行交互。

如何改进网络表单的逻辑和数据管理？

1 个答案: