如何改进我的Web表单的逻辑和数据管理？

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框架可以帮助您在视图，数据和逻辑之间进行交互。