選択値に基づいて複数のdivが表示されます

Question

シンプルなフォームでコンテンツを非表示にするjQueryを探しています。

選択フィールドのピッキングオプション1-3は、3つのデータレスポンスディビジョンの1つを表示し、残りのフォーム（データ形式 - オーダ2）の内容を表示する必要があります。

私は、データ属性は下がるには良いルートだと思っていますが、どこから開始するのかは少しは分かりません。

<form> 
    <div data-form-order="1"> 

    <div id="opening-question"> 
     <select id="select-box"> 
     <option value="0">- please select -</option> 
     <option value="1">Option 1</option> 
     <option value="2">Option 2</option> 
     <option value="3">Option 3</option> 
    </select> 
    </div> 

    <div data-response="op1"> 
     This is content for option 1. 
    </div> 
    <div data-response="op2"> 
     This is content for option 2. 
    </div> 
    <div data-response="op3"> 
     This is content for option 3. 
    </div> 
    </div> 

    <div data-form-order="2" id="other-questions"> 
    Rest of form content. This area should show when option values 1-3 are selected in the select field. 
    </div> 
</form> 

Answer 1

本当に必要なのは、デフォルトでは、いくつかのCSSを使用して、すべてのdivを非表示にして、その値を取得し、その値に基づいてdiv要素を選択するために、change機能を使用することです：

$('#select-box').change(function(){ 
 

 
    var selectVal = $(this).val(); 
 
    $('.content, #other-questions').hide(); 
 
    $('.content[data-response="op' + selectVal + '"], #other-questions').show(); 
 

 
});

.content, #other-questions { 
 
display: none; 
 
}

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script> 
 

 
<form> 
 
    <div data-form-order="1"> 
 

 
    <div id="opening-question"> 
 
     <select id="select-box"> 
 
     <option value="0">- please select -</option> 
 
     <option value="1">Option 1</option> 
 
     <option value="2">Option 2</option> 
 
     <option value="3">Option 3</option> 
 
    </select> 
 
    </div> 
 

 
    <div class="content" data-response="op1"> 
 
     This is content for option 1. 
 
    </div> 
 
    <div class="content" data-response="op2"> 
 
     This is content for option 2. 
 
    </div> 
 
    <div class="content" data-response="op3"> 
 
     This is content for option 3. 
 
    </div> 
 
    </div> 
 

 
    <div data-form-order="2" id="other-questions"> 
 
    Rest of form content. This area should show when option values 1-3 are selected in the select field. 
 
    </div> 
 
</form>

データ属性よりも要素を選択するのに適したクラスを含めるように答えを更新しました。

Answer 2

これはクラスを使用することをお勧めします。データ属性は必要ありません。

$(function() { 
 
    $('#select-box').change(function(){ 
 
     if($('#select-box').val() == '1') { 
 
      $('.response1').show(); 
 
      $('.response2').hide(); 
 
      $('.response3').hide(); 
 
      $('#content').show(); 
 
     } 
 
     else if($('#select-box').val() == '2') { 
 
      $('.response1').hide(); 
 
      $('.response2').show(); 
 
      $('.response3').hide(); 
 
      $('#content').show(); 
 
     } 
 
     else if($('#select-box').val() == '3') { 
 
      $('.response1').hide(); 
 
      $('.response2').hide(); 
 
      $('.response3').show(); 
 
      $('#content').show(); 
 
     } 
 
    }); 
 
});

.response1, .response2, .response3 { 
 
    display: none; 
 
} 
 

 
#content { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div data-form-order="1"> 
 

 
    <div id="opening-question"> 
 
     <select id="select-box"> 
 
     <option value="0">- please select -</option> 
 
     <option value="1">Option 1</option> 
 
     <option value="2">Option 2</option> 
 
     <option value="3">Option 3</option> 
 
    </select> 
 
    </div> 
 

 
    <div class='response1' data-response="op1"> 
 
     This is content for option 1. 
 
    </div> 
 
    <div class='response2' data-response="op2"> 
 
     This is content for option 2. 
 
    </div> 
 
    <div class='response3' data-response="op3"> 
 
     This is content for option 3. 
 
    </div> 
 
    </div> 
 

 
    <div id='content' data-form-order="2" id="other-questions"> 
 
    Rest of form content. This area should show when option values 1-3 are selected in the select field. 
 
    </div> 
 
</form>

Answer 3

私はClassを使用して表示/非表示を示しています。最初はすべてのdivを非表示にします（divにのみ一致します）。ここにhow。私は2つのクラスを作成しましたhide 要素を非表示にし、show要素を表示します。

$('[data-response^=op]').attr('class',"hide");//Initially set all div hidden 
 
$("#select-box").on("change",function(){ 
 
    var value = $(this).val(); 
 
    if(value !="" && value<=3 && value !=0){ 
 
    console.clear();// to clear older logs. 
 
    console.log('Selected value'+$(this).val()); 
 
    $('[data-response^=op]').attr('class',"hide");//On change hide all div's 
 
    var selector = "op"+value; 
 
    $(document).find("[data-response='"+selector+"']").attr('class',"show"); 
 
    $("#other-questions").attr('class',"show");//Show matching div. 
 
    }else{ 
 
    $("#other-questions").attr('class',"hide"); 
 
    $('[data-response^=op]').attr('class',"hide"); 
 
    } 
 

 
})

.hide{ 
 
display:none; 
 
} 
 

 
.show{ 
 
display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div data-form-order="1"> 
 

 
    <div id="opening-question"> 
 
     <select id="select-box"> 
 
     <option value="0">- please select -</option> 
 
     <option value="1">Option 1</option> 
 
     <option value="2">Option 2</option> 
 
     <option value="3">Option 3</option> 
 
    </select> 
 
    </div> 
 

 
    <div data-response="op1"> 
 
     This is content for option 1. 
 
    </div> 
 
    <div data-response="op2"> 
 
     This is content for option 2. 
 
    </div> 
 
    <div data-response="op3"> 
 
     This is content for option 3. 
 
    </div> 
 
    </div> 
 

 
    <div data-form-order="2" id="other-questions" class="hide"> 
 
    Rest of form content. This area should show when option values 1-3 are selected in the select field. 
 
    </div> 
 
</form>

Answer 4

私は非常にDecoupling Your HTML, CSS, and JavaScriptを読んでお勧めします。重複したコードや強固に結合されたコードがなくても、かなりシンプルで再利用可能なjQueryを作成して、かなりクールなものにすることができます。以下は非常に拡張性が高く、再利用可能で、読みやすく、管理しやすいです。

$(document).ready(()=>{ 
 
    $('.js-revealer').on('change', function(){ 
 
    var $select = $(this); 
 
    var $selected = $select.find('option:selected'); 
 
    var hideSelector = $selected.data('r-hide-target'); 
 
    var showSelector = $selected.data('r-show-target'); 
 
    
 
    $(hideSelector).addClass('is-hidden'); 
 
    $(showSelector).removeClass('is-hidden'); 
 
    }); 
 
});

.is-hidden{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div data-form-order="1"> 
 

 
    <div id="opening-question"> 
 
     <select id="select-box" class="js-revealer"> 
 
     <option value="0" data-r-show-target="" data-r-hide-target=".opt-1, .opt-2, .opt-3, .opt-other">- please select -</option> 
 
     <option value="1" data-r-show-target=".opt-1, .opt-other" data-r-hide-target=".opt-2, .opt-3">Option 1</option> 
 
     <option value="2" data-r-show-target=".opt-2, .opt-other" data-r-hide-target=".opt-1, .opt-3">Option 2</option> 
 
     <option value="3" data-r-show-target=".opt-3, .opt-other" data-r-hide-target=".opt-1, .opt-2">Option 3</option> 
 
    </select> 
 
    </div> 
 

 
    <div data-response="op1" class="opt-1 is-hidden"> 
 
     This is content for option 1. 
 
    </div> 
 
    <div data-response="op2" class="opt-2 is-hidden"> 
 
     This is content for option 2. 
 
    </div> 
 
    <div data-response="op3" class="opt-3 is-hidden"> 
 
     This is content for option 3. 
 
    </div> 
 
    </div> 
 

 
    <div data-form-order="2" id="other-questions" class="opt-other is-hidden"> 
 
    Rest of form content. This area should show when option values 1-3 are selected in the select field. 
 
    </div> 
 
</form>