Javascript - trao đổi trong phạm vi <option>

Tôi có một biểu mẫu tương đối đơn giản hỏi nhiều câu hỏi khác nhau. Một trong những câu hỏi đó được trả lời thông qua một hộp chọn. Những gì tôi muốn làm là nếu người đó chọn một tùy chọn cụ thể, họ sẽ được nhắc để biết thêm thông tin.Javascript - trao đổi trong phạm vi <option>

Với sự giúp đỡ của một vài hướng dẫn trực tuyến, tôi đã quản lý để có được Javascript để hiển thị một div ẩn chỉ tốt. Vấn đề của tôi là tôi dường như không thể địa phương hoá sự kiện này vào thẻ Tùy chọn, chỉ thẻ Chọn không thực sự sử dụng.

Tại thời điểm mã trông giống như (mã đơn giản để hỗ trợ rõ ràng!):

<select id="transfer_reason" name="transfer_reason onChange="javascript:showDiv('otherdetail');"> 
<option value="x">Reason 1</option> 
<option value="y">Reason 2</option> 
<option value="other">Other Reason</option> 
</select> 

<div id="otherdetail" style="display: none;">More Detail Here Please</div>

Những gì tôi muốn là nếu họ chọn "Lý do khác", sau đó nó sẽ hiển thị div. Không chắc chắn làm thế nào tôi đạt được điều này nếu onChange không thể được sử dụng với thẻ tùy chọn!

Bất kỳ sự trợ giúp nhiều đánh giá cao :)

Lưu ý: Toàn bộ người mới bắt đầu khi nói đến Javascript, Tôi xin lỗi nếu điều này là ngớ ngẩn đơn giản để đạt được!

Nguồn

2008-12-15 suitedupgeek

Thiết lập trình xử lý sự kiện onchange cho hộp chọn để xem chỉ mục hiện được chọn. Nếu chỉ mục được chọn là tùy chọn 'Lý do khác', sau đó hiển thị thông báo; nếu không, hãy ẩn phân chia.

<html> 
<head> 
    <script type="text/javascript"> 
    window.onload = function() { 
     var eSelect = document.getElementById('transfer_reason'); 
     var optOtherReason = document.getElementById('otherdetail'); 
     eSelect.onchange = function() { 
      if(eSelect.selectedIndex === 2) { 
       optOtherReason.style.display = 'block'; 
      } else { 
       optOtherReason.style.display = 'none'; 
      } 
     } 
    } 
    </script> 
</head> 
<body> 
    <select id="transfer_reason" name="transfer_reason"> 
     <option value="x">Reason 1</option> 
     <option value="y">Reason 2</option> 
     <option value="other">Other Reason</option> 
    </select> 
    <div id="otherdetail" style="display: none;">More Detail Here Please</div> 
</body> 
</html>

Cá nhân, tôi sẽ tiến thêm một bước nữa và đưa JavaScript vào tệp bên ngoài và chỉ đưa nó vào tiêu đề của trang; tuy nhiên, đối với tất cả ý định và mục đích, điều này sẽ giúp trả lời câu hỏi của bạn.

Nguồn

2008-12-15 12:34:32 Tom

Sau khi đọc phản ứng tuyệt vời của Tom, tôi nhận ra rằng nếu tôi đã thêm các tùy chọn khác vào biểu mẫu của tôi, nó sẽ bị hỏng. Trong ví dụ của tôi, điều này là rất có thể, bởi vì các tùy chọn có thể được thêm/xóa bằng cách sử dụng một bảng quản trị php.

Tôi đã đọc một chút và thay đổi nó một chút để thay vì sử dụng selectedIndex nó sử dụng giá trị thay thế.

<script type="text/javascript"> 
window.onload = function() { 
    var eSelect = document.getElementById('transfer_reason'); 
    var optOtherReason = document.getElementById('otherdetail'); 
    eSelect.onchange = function() { 
     if(eSelect.value === "Other") { 
      optOtherReason.style.display = 'block'; 
     } else { 
      optOtherReason.style.display = 'none'; 
     } 
    } 
    } 
    </script>

Hy vọng điều này sẽ giúp người khác trong tương lai!

Nguồn

2008-12-15 13:00:48 suitedupgeek

Câu trả lời của Tom rất thanh lịch và gọn gàng đặt JS ra khỏi đánh dấu HTML. Như đã đề cập, nó thậm chí có thể được chuyển đến một tập tin bên ngoài. Tuy nhiên nó bổ sung khá nhiều "vô nghĩa" vào mã, giống như nhiều nhiệm vụ ẩn danh, vv ..

Nếu bạn muốn giải pháp nhanh chóng, bạn có thể đặt tất cả trong onchange() bên trong thẻ được chọn. Chọn cái bạn thấy phù hợp hơn.

<select id="transfer_reason" name="transfer_reason" onchange="document.getElementById('otherdetail').style.display = (this.selectedIndex === 2) ? 'block' : 'none';"> 
    <option value="x">Reason 1</option> 
    <option value="y">Reason 2</option> 
    <option value="other">Other Reason</option> 
</select> 
<div id="otherdetail" style="display: none;">More Detail Here Please</div>

Nguồn

2008-12-15 13:03:20 Tuminoid

Cá nhân tôi thích đặt lớp thay vì thuộc tính kiểu; thậm chí có thể là tổ tiên của div (có thể là một vùng chứa chung cho cả trình đơn thả xuống và div; cho phép bạn sử dụng cùng một mã nhiều lần) – bart

Tôi vừa sửa đổi onchange, html đã được sao chép từ câu hỏi. – Tuminoid

Thuộc tính phong cách chỉ là để lưu tôi sao chép ra các tập tin CSS quá, như đã đề cập ở trên, cho rõ ràng. – suitedupgeek

Javascript - trao đổi trong phạm vi <option>

Trả lời

Các vấn đề liên quan