如何改進我的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框架可以幫助您在視圖，數據和邏輯之間進行交互。