JavaScript隱藏特定分隔符的相應字段

Question

我想隱藏下拉列表的相應textarea字段，它將用於很多實例中，這就是爲什麼我需要它在函數上。

<div id="formElement1" class="field"> 
    <label for="field1">Start and end date defined</label> 
    <select id="field1" name="campaign-dd1"> 
     <option value="" >Please Select</option> 
     <option value="Yes" >Yes</option> 
     <option value="No" >No</option> 
     <option value="N/A" >N/A</option> 
    </select> 
</div> 
<div class="clear"></div> 
<div id="formElement2" class="field"> 
    <label for="field2">Comment(s)</label> 
    <textarea id="field2" name="campaign-comment1" ></textarea> 
</div> 
<div id="formElement3" class="field"> 
    <label for="field3">Content and workflow are compliant to requirements</label> 
    <select id="field3" name="campaign-dd2"> 
     <option value="" >Please Select</option> 
     <option value="Yes" >Yes</option> 
     <option value="No" >No</option> 
     <option value="N/A" >N/A</option> 
    </select> 
</div> 
<div class="clear"></div> 
<div id="formElement4" class="field"> 
    <label for="field4">Comment(s)</label> 
    <textarea id="field4" name="campaign-comment2" ></textarea> 
</div> 
<div id="formElement5" class="field"> 
    <label for="field5">Flow working as planned</label> 
    <select id="field5" name="campaign-dd3"> 
     <option value="" >Please Select</option> 
     <option value="Yes" >Yes</option> 
     <option value="No" >No</option> 
     <option value="N/A" >N/A</option> 
    </select> 
</div> 
<div class="clear"></div> 
<div id="formElement6" class="field"> 
    <label for="field6">Comment(s)</label> 
    <textarea id="field6" name="campaign-comment3" ></textarea> 
</div> 

正如你可以在代碼中看到下拉name=campaign-dd#有特定的textarea name=campaign-comment#。

Answer 1

初始加載。我想隱藏它。而一旦選擇了是

在這種情況下，你可以把一個普通類上的所有包含註釋字段.field元素，在我的例子下面我用.comment，並把他們藏在CSS就會顯示出來。然後在JS中，您可以在select元素上放置change事件處理程序，該元素根據所選選項顯示/隱藏相關注釋字段。試試這個：

$('select').change(function() { 
 
    $(this).closest('.field').nextAll('.field:first').toggle($(this).val() == 'Yes'); 
 
});

.field.comment { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="formElement1" class="field"> 
 
    <label for="field1">Start and end date defined</label> 
 
    <select id="field1" name="campaign-dd1"> 
 
    <option value="">Please Select</option> 
 
    <option value="Yes">Yes</option> 
 
    <option value="No">No</option> 
 
    <option value="N/A">N/A</option> 
 
    </select> 
 
</div> 
 
<div class="clear"></div> 
 
<div id="formElement2" class="field comment"> 
 
    <label for="field2">Comment(s)</label> 
 
    <textarea id="field2" name="campaign-comment1"></textarea> 
 
</div> 
 
<div id="formElement3" class="field"> 
 
    <label for="field3">Content and workflow are compliant to requirements</label> 
 
    <select id="field3" name="campaign-dd2"> 
 
    <option value="">Please Select</option> 
 
    <option value="Yes">Yes</option> 
 
    <option value="No">No</option> 
 
    <option value="N/A">N/A</option> 
 
    </select> 
 
</div> 
 
<div class="clear"></div> 
 
<div id="formElement4" class="field comment"> 
 
    <label for="field4">Comment(s)</label> 
 
    <textarea id="field4" name="campaign-comment2"></textarea> 
 
</div> 
 
<div id="formElement5" class="field"> 
 
    <label for="field5">Flow working as planned</label> 
 
    <select id="field5" name="campaign-dd3"> 
 
    <option value="">Please Select</option> 
 
    <option value="Yes">Yes</option> 
 
    <option value="No">No</option> 
 
    <option value="N/A">N/A</option> 
 
    </select> 
 
</div> 
 
<div class="clear"></div> 
 
<div id="formElement6" class="field comment"> 
 
    <label for="field6">Comment(s)</label> 
 
    <textarea id="field6" name="campaign-comment3"></textarea> 
 
</div>

Answer 2

添加類更有意義會更容易些，但你可以從提供給選擇名稱textarea的構造名稱，將其隱藏等

$('.field select').on('change', function() { 
 

 
    var parts = this.name.split('-'); 
 
    var numb = parts[1].replace(/\D/g, ''); 
 
    
 
    $('[name="' + parts[0] + '-comment' + numb + '"]').toggle(this.value !== 'Yes') 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<em>Select "Yes" to hide comment</em> 
 
<br><br><br> 
 
<div id="formElement1" class="field"> 
 
    <label for="field1">Start and end date defined</label> 
 
    <select id="field1" name="campaign-dd1"> 
 
     <option value="">Please Select</option> 
 
     <option value="Yes">Yes</option> 
 
     <option value="No">No</option> 
 
     <option value="N/A">N/A</option> 
 
    </select> 
 
</div> 
 
<div class="clear"></div> 
 
<div id="formElement2" class="field"> 
 
    <label for="field2">Comment(s)</label> 
 
    <textarea id="field2" name="campaign-comment1"></textarea> 
 
</div> 
 
<div id="formElement3" class="field"> 
 
    <label for="field3">Content and workflow are compliant to requirements</label> 
 
    <select id="field3" name="campaign-dd2"> 
 
     <option value="">Please Select</option> 
 
     <option value="Yes">Yes</option> 
 
     <option value="No">No</option> 
 
     <option value="N/A">N/A</option> 
 
    </select> 
 
</div> 
 
<div class="clear"></div> 
 
<div id="formElement4" class="field"> 
 
    <label for="field4">Comment(s)</label> 
 
    <textarea id="field4" name="campaign-comment2"></textarea> 
 
</div> 
 
<div id="formElement5" class="field"> 
 
    <label for="field5">Flow working as planned</label> 
 
    <select id="field5" name="campaign-dd3"> 
 
     <option value="">Please Select</option> 
 
     <option value="Yes">Yes</option> 
 
     <option value="No">No</option> 
 
     <option value="N/A">N/A</option> 
 
    </select> 
 
</div> 
 
<div class="clear"></div> 
 
<div id="formElement6" class="field"> 
 
    <label for="field6">Comment(s)</label> 
 
    <textarea id="field6" name="campaign-comment3"></textarea> 
 
</div>