Выберите параметры: jQuery, Case и показать / скрыть поля формы

Question

Каков наиболее эффективный способ показать / скрыть поля формы на основе значения элемента управления select? У меня есть один элемент управления select и три поля ввода, которые отображаются / скрываются в зависимости от типа бизнеса, на который вы работаете.

<select id="business-type">
  <option value="1">Sole Trader</option>
  <option value="2">Partnership</option>
  <option value="3">Public Sector</option>
  <option value="4">Public Limited Company (Plc)</option>
  <option value="5">Charity</option>
</select>

// This should appear if you are a Sole Trader (option 1 in the select box)
<div id="soletrader">
<label for="tax">VAT Number</label>
<input type="text" name="tax" id="tax" /> 
</div>

// This should appear if you are a Public Sector business (option 3 in the select box)
<div id="publicsector">
<label for="urn">URN Number</label>
<input type="text" name="urn" id="urn" />   
</div>

// This should appear if you are a Charity (option 5 in the select box)
<div id="charity">
<label for="charityref">Charity Reference No.</label>
<input type="text" name="charity" id="charityref" />    
</div>

Является ли утверждение случая, написанное в jquery, наиболее подходящим подходом к этому вопросу? Как бы я написал такое заявление?

Три поля ввода должны быть скрыты по умолчанию. Будем очень благодарны любой помощи. Я мрачен в javascript / jquery.

Answer 1

Во-первых, вы должны добавить "class = 'field'" к каждому полю div.

Затем, с этим кодом, вы увидите / скроете соответствующее поле при выборе в выпадающем списке:

$('#business-type').change(function(){
    var selection = $('#business-type').val();
    $('.field').hide();
    switch(selection){
        case 0:
            $('#soletrader').show();
            break;
        case 1:
            $('#publicsector').show();
            break;
        case 2:
            $('#charity').show();
            break;
    }
});

Answer 2

Несколько вещей:

1) Я бы добавил класс (я использовал .additional-field ниже) к каждому из дополнительных полей.Это позволит вам скрыть их всех одним махом, вместо того, чтобы требовать $.hide() каждого явно.Это не так уж и плохо с тремя, но если бы вы получили гораздо больше, это бы быстро заработало.

2) Я помещаю код в функцию и вызываю эту функцию при загрузке страницы и использую ее.в качестве параметра .change().Это позволяет избежать повторения одного и того же кода и покрывает случай начального значения от редактирования существующего или ошибки в форме, которую необходимо исправить.В противном случае дополнительное поле не будет отображаться, пока вы не выберете что-то другое, а затем снова выберете элемент.

$(document).ready(function(){

    function toggleBusinessTypeAdditionalFields() {
        $('.additional-field').hide();

        var selected = $('#business-type').val();
        switch (selected) {
            case 1:
                $('#soletrader').show();
                break;
            case 3:
                $('#publicsector').show();
                break;
            case 5:
                $('#charity').show();
                break;
        }
    }
    toggleBusinessTypeAdditionalFields();
    $('#business-type').change(toggleBusinessTypeAdditionalFields);

});

Answer 3

Я не думаю, что оператор if / switch необходим.Помогите вашему JavaScript немного увеличить HTML-разметку.Если вы поместите атрибут с именем «data-val» в каждый из элементов div и назначите ему значение параметра, с которым вы хотите, чтобы он отображался вместе, тогда JS станет очень простым.

Таким образом, ваш HTML будетдля div'ов это выглядит примерно так:

<div id="soletrader" data-val="1">
    <label for="tax">VAT Number</label>
    <input type="text" name="tax" id="tax" /> 
</div>

И тогда ваш JS будет:

 $('select').change(function(){
     var val = $(this).val();
     $('div').hide().filter('[data-val=' + val + ']').show();
 });

Answer 4

Поместите эти функции в ваш $.ready(function(){});

$('#soletrader').hide();
$('#publicsector').hide();
$('#charity').hide();

$('#business-type').change(function(){
   var value = $(this).val();
   if(value == '1'){
     $('#soletrader').show();
     $('#publicsector').hide();
     $('#charity').hide();
   } else if(value == '3'){
     $('#soletrader').hide();
     $('#publicsector').show();
     $('#charity').hide();
   } else if(value == '5'){
     $('#soletrader').hide();
     $('#publicsector').hide();
     $('#charity').show();
   } else {
     $('#soletrader').hide();
     $('#publicsector').hide();
     $('#charity').hide();
   }
});