Ẩn hiển thị chọn tùy chọn javascript

Ví dụ sau đây sẽ minh họa cho bạn cách hiển thị và ẩn các phần tử div dựa trên lựa chọn thả xuống hoặc tùy chọn đã chọn trong hộp chọn bằng cách sử dụng phương thức change() của jQuery kết hợp với phương thức show() và hide(). Các hộp div trong ví dụ này được ẩn theo mặc định bằng cách sử dụng thuộc tính CSS display có giá trị được đặt thành none

jQuery Show Hide Elements Using Select Box





    

        
            
            
            
            
        
    
    
You have selected red option so i am here
    
You have selected green option so i am here
    
You have selected blue option so i am here

---

Câu hỏi thường gặp liên quan

Dưới đây là một số câu hỏi thường gặp khác liên quan đến chủ đề này

Việc hủy này cũng có thể được sử dụng bên trong một vòng lặp, vì vậy, sau đó bạn có thể cấu trúc các tỉnh của mình như vậy bằng cách sử dụng

const provinces = [
  ['AB', 'Alberta'],
  ['BC', 'British Columbia'],
  ['MB', 'Manitoba'],
  ['NB', 'New Brunswick'],
  ['NL', 'Newfoundland']
]

Ở đây tôi đang sử dụng vòng lặp for…of để đăng xuất mã alpha và tên tỉnh

for (const [alphaCode, province] of provinces) {
  console.log(alphaCode + ' - ' + province)
}

/* Outputs
AB - Alberta
BC - British Columbia
MB - Manitoba
NB - New Brunswick
NL - Newfoundland
*/

Bạn có thể hy vọng rằng việc phá hủy cung cấp một giải pháp thay thế rõ ràng hơn cho việc sử dụng các chỉ mục e. g. provincesArray[1][i] và

const [breakfast, lunch, dinner] = ['cornflakes', 'sandwich', 'bolognese']
console.log(breakfast) // 'cornflakes'
console.log(dinner) // 'bolognese'

0

Ngoài ra, nếu bạn sử dụng 'let' hoặc 'const' để xác định các biến của mình, bạn có thể tận dụng phạm vi khối

Sau đó, bạn có thể xóa hai dòng này

var newOption;
var newTextNode;

Và thay vào đó hãy xác định các biến bên trong vòng lặp của bạn. Bằng cách sử dụng const ở đây, chúng ta có được một định nghĩa biến hoàn toàn mới cho mỗi lần lặp của vòng lặp

Kiếm thu nhập với kỹ năng HTML của bạn

Đăng ký và chúng tôi sẽ gửi cho bạn những cơ hội làm việc tự do tốt nhất ngay trong hộp thư đến của bạn
Chúng tôi đang xây dựng thị trường làm việc tự do tự phục vụ lớn nhất cho những người như bạn

Chúng tôi đã sử dụng thuộc tính đích trên đối tượng event. Thuộc tính target là một tham chiếu đến đối tượng (phần tử) mà sự kiện được gửi đi

Trong ví dụ, thuộc tính

const el = document.getElementById('select');

const box = document.getElementById('box');

el.addEventListener('change', function handleChange(event) {
  if (event.target.value === 'show') {
    box.style.display = 'block';
  } else {
    box.style.display = 'none';
  }
});

0 đề cập đến hộp chọn

Để xác định xem

const el = document.getElementById('select');

const box = document.getElementById('box');

el.addEventListener('change', function handleChange(event) {
  if (event.target.value === 'show') {
    box.style.display = 'block';
  } else {
    box.style.display = 'none';
  }
});

1 sẽ được hiển thị hay ẩn đi, chúng tôi kiểm tra xem

const el = document.getElementById('select');

const box = document.getElementById('box');

el.addEventListener('change', function handleChange(event) {
  if (event.target.value === 'show') {
    box.style.display = 'block';
  } else {
    box.style.display = 'none';
  }
});

2 của phần tử select có được đặt thành một giá trị cụ thể hay không và đặt thuộc tính display của phần tử cho phù hợp

Nếu bạn tải trang và thay đổi giá trị đã chọn thành

const el = document.getElementById('select');

const box = document.getElementById('box');

el.addEventListener('change', function handleChange(event) {
  if (event.target.value === 'show') {
    box.style.display = 'block';
  } else {
    box.style.display = 'none';
  }
});

4, phần tử

const el = document.getElementById('select');

const box = document.getElementById('box');

el.addEventListener('change', function handleChange(event) {
  if (event.target.value === 'show') {
    box.style.display = 'block';
  } else {
    box.style.display = 'none';
  }
});

1 sẽ xuất hiện

Sau đó, nếu bạn thay đổi giá trị của phần tử trở lại thành

const el = document.getElementById('select');

const box = document.getElementById('box');

el.addEventListener('change', function handleChange(event) {
  if (event.target.value === 'show') {
    box.style.display = 'block';
  } else {
    box.style.display = 'none';
  }
});

6, thì

const el = document.getElementById('select');

const box = document.getElementById('box');

el.addEventListener('change', function handleChange(event) {
  if (event.target.value === 'show') {
    box.style.display = 'block';
  } else {
    box.style.display = 'none';
  }
});

1 lại bị ẩn

Chúng tôi đã sử dụng thuộc tính hiển thị trong các ví dụ, tuy nhiên, bạn có thể cần sử dụng thuộc tính khả năng hiển thị tùy thuộc vào trường hợp sử dụng của bạn

Khi thuộc tính display của phần tử được đặt thành

const el = document.getElementById('select');

const box = document.getElementById('box');

el.addEventListener('change', function handleChange(event) {
  if (event.target.value === 'show') {
    box.style.display = 'block';
  } else {
    box.style.display = 'none';
  }
});

9, phần tử đó sẽ bị xóa khỏi DOM và không ảnh hưởng đến bố cục. Tài liệu được hiển thị như thể phần tử không tồn tại

Mặt khác, khi thuộc tính

  
    
    bobbyhadz.com
  

  
  
    Choose an Option:

    
      
      
    

    
Box content

    
More content here

    
  

0 của phần tử được đặt thành

  
    
    bobbyhadz.com
  

  
  
    Choose an Option:

    
      
      
    

    
Box content

    
More content here

    
  

1, thuộc tính này vẫn chiếm dung lượng trên trang, tuy nhiên, phần tử ẩn (không được vẽ). Nó vẫn ảnh hưởng đến bố cục trang của bạn như bình thường

Hiển thị một Div khi tùy chọn Chọn được chọn bằng khả năng hiển thị

Dưới đây là một ví dụ sử dụng thuộc tính

  
    
    bobbyhadz.com
  

  
  
    Choose an Option:

    
      
      
    

    
Box content

    
More content here

    
  

0 để hiển thị và ẩn

const el = document.getElementById('select');

const box = document.getElementById('box');

el.addEventListener('change', function handleChange(event) {
  if (event.target.value === 'show') {
    box.style.display = 'block';
  } else {
    box.style.display = 'none';
  }
});

1 khi một tùy chọn cụ thể được chọn

  
    
    bobbyhadz.com
  

  
  
    Choose an Option:

    
      
      
    

    
Box content

    
More content here

    
  

Và đây là mã JavaScript liên quan

const el = document.getElementById('select');

const box = document.getElementById('box');

el.addEventListener('change', function handleChange(event) {
  if (event.target.value === 'show') {
    box.style.visibility = 'visible';
  } else {
    box.style.visibility = 'hidden';
  }
});

Nếu bạn tải trang, bạn sẽ thấy rằng

const el = document.getElementById('select');

const box = document.getElementById('box');

el.addEventListener('change', function handleChange(event) {
  if (event.target.value === 'show') {
    box.style.display = 'block';
  } else {
    box.style.display = 'none';
  }
});

1 vẫn chiếm dung lượng trên trang, mặc dù nó bị ẩn

Ban đầu chúng ta sử dụng thuộc tính

  
    
    bobbyhadz.com
  

  
  
    Choose an Option:

    
      
      
    

    
Box content

    
More content here

    
  

0 để ẩn đi

const el = document.getElementById('select');

const box = document.getElementById('box');

el.addEventListener('change', function handleChange(event) {
  if (event.target.value === 'show') {
    box.style.display = 'block';
  } else {
    box.style.display = 'none';
  }
});

1 nên phần tử này không được hiển thị nhưng vẫn ảnh hưởng đến bố cục trên trang như bình thường

Khi bạn sử dụng thuộc tính display, phần tử này sẽ được đưa ra khỏi DOM và các phần tử khác sẽ thế chỗ của nó

Làm cách nào tôi có thể hiển thị ẩn div khi một tùy chọn đã chọn được chọn trong JavaScript?

Làm cách nào để ẩn hộp chọn trong JavaScript?

Làm cách nào để hiển thị Hộp văn bản ẩn khi một tùy chọn cụ thể được chọn trong JavaScript?

Làm cách nào để chọn phần tử và ẩn trong JavaScript?