Show và hide một element bở select form

24/07/2021 07:31 1142

Nhu cầu là chúng ta sẽ có một select khi chọn mục nào thì nó hiển thị tương ứng với element, như hình bên dưới ( code dưới được xây dựng dựa trên boostrap)

Table of Contents

1. Code html

<div class="asenpts-select-lists-from">
	<h1 class="mb-3">Select lists from</h1>
	<form method="post" action="" id="select-lists-from-form" class="mt-4">
		<div class="card" style="margin-bottom:15px;">
			<h6 class="card-header">Select lists</h6>
			<div class="card-block">
				 <div class="form-group">
    			<label for="select-a-source">Select a source</label>
                <select class="form-control" name="select-a-source" id="select-a-source">
					                    	<option value="self">Self (Developing)</option>
                                        	<option value="fluent-crm">Fluent CRM</option>
                                    </select>
  				</div>
				  								<div class="form-group source" id="source-fluent-crm" style="display: block;">
                 <label for="source-fluent-crm-select">Select lists from Fluent CRM</label>
                    <select multiple="" class="form-control" id="source-fluent-crm-select" name="source-fluent-crm-select">
                      	                    	<option value="2">List 2</option>
                    	                    	<option value="3">Danh sách nhận bài viết mới</option>
                    	                    </select>
                </div>
                                <div class="form-group source" id="source-self" style="display: none;">
                 <label for="source-fluent-crm-select">Select lists form self (developing)</label>
                    <select multiple="" class="form-control" id="source-fluent-crm-select" name="source-fluent-crm-select">
                    	<option value="">Select a list</option>
                    	
                    </select>
                </div>
			</div>
		</div>
		<button type="submit" class="btn btn-primary" id="select-lists-from-trigger">Save Changes</button>
	</form>
</div>

<h1 class="mb-3">Select lists from</h1>

<h6 class="card-header">Select lists</h6>

<label for="select-a-source">Select a source</label>

<option value="self">Self (Developing)</option>

<option value="fluent-crm">Fluent CRM</option>

</select>

</div>

<label for="source-fluent-crm-select">Select lists from Fluent CRM</label>

</select>

</div>

<label for="source-fluent-crm-select">Select lists form self (developing)</label>

<option value="">Select a list</option>

</select>

</div>

<button type="submit" class="btn btn-primary" id="select-lists-from-trigger">Save Changes</button>

</form>

</div>

2. Code js

$('select#select-a-source').on('change',function(){
				$('.asenpts-select-lists-from .form-group.source').hide();
				var v = $("select#select-a-source").val();
				$('#source-'+v).show();
			});
			$(window).on('load',function(){
				$('.asenpts-select-lists-from .form-group.source').hide();
				var v = $("select#select-a-source").val();
				$('#source-'+v).show();
			});

$('select#select-a-source').on('change',function(){

$('.asenpts-select-lists-from .form-group.source').hide();

var v = $("select#select-a-source").val();

$('#source-'+v).show();

});

$(window).on('load',function(){

$('.asenpts-select-lists-from .form-group.source').hide();

var v = $("select#select-a-source").val();

$('#source-'+v).show();

});

5/5 (2 Đánh giá)

Các bài viết khác có thể hữu ích với bạn

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Cách dùng Local Storage để lưu trữ dữ liệu ít quan trong [ 09/11/2022 01:39 ]
Mã js copy nội dung text của một element vào bộ nhớ tạm [ 19/01/2022 14:42 ]
Đoạn mã copy text tới clipboard [ 14/11/2021 04:00 ]
Xử lý ngày tháng date trong javascript [ 30/10/2021 02:30 ]
Tìm kiếm tức thời autocomplete hay đề xuất trong javascript [ 21/10/2021 02:51 ]
Scroll to with animation to element by jquery [ 08/09/2021 02:02 ]
Check tất cả checkbox bằng javascript [ 11/11/2020 08:18 ]
Thực hiện một function tại một thời điểm nào đó trong javascript (setInterval và setTimeout) [ 15/10/2020 13:20 ]
Function kiểm tra email bằng javascript ( Function check email by javascript) [ 20/08/2020 04:36 ]
Kiểm tra số điện thoại bằng javascript ( check phone number by javascript) [ 20/08/2020 03:21 ]

Show và hide một element bở select form

1. Code html

2. Code js

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)