ตัวอย่าง Code ซ่อน/แสดง Textbox เมื่อเลือก Listbox jQuery มีตัวอย่างการใช้งาน

เราสามารถเขียน jQuery เพื่อใช้สำหรับ ซ่อนหรือแสดง Texbox ผ่านการเลือก Option ใน Listbox ได้ตามตัวอย่างด้านล่างนี้

See the Pen Show/Hide Textbox via Listbox by Kiti Chan Boyd (@kiti-chan-boyd) on CodePen.

---

ตัวอย่างการเขียนโค้ด

เราสามารถเรียกใช้งาน jQuery โดยเพิ่ม code script ลงไปใน Tag <header>....</header> ตามรูปด้านล่าง และเพื่อเพิ่มความสวยงามให้กับ Form เราสามารถเรียกใช้ Bootstarp css ได้อีกด้วย

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script type='text/javascript' src='https://code.jquery.com/jquery-1.12.4.min.js'></script>

Code ส่วนของ HTML สำหรับสร้าง Listbox และ Textbox

<div class="container1">
    <h1 style="padding-left: 15px; font-size: 15px; margin: 25px 0 0 0;">
          ตัวอย่าง ซ่อน/แสดง Textbox เมื่อเลือก Listbox jQuery
    </h1>
    <div class="row" style="float:left; width: 600px; margin: 25px auto;">
        <div class='col-sm-3'>
            <div class="form-group">
                <select id="show_textbox" class="show_textbox form-control">
                    <option value="yes">แสดง</option>
                    <option value="no">ซ่อน</option>
                </select>
            </div>
        </div>
        <div class="col-sm-9">
            <div class="form-group">
                <input type="text" id="input1" class="textbox form-control" placeholder="Textbox ตัวอย่าง">
            </div>
        </div>
    </div>
</div>

Code ส่วน javascript สำหรับเขียน function ควบคุมการ ซ่อน/แสดง Textbox ผ่านการเลือก Listbox

<script>
$(document).ready(function(){
$('#show_textbox').on('change',function(){
if($(this).val() === 'yes'){
$('#input1').show();
}else{
$('#input1').val('').hide();
}
});
});
</script>

---

อธิบายเพิ่มเติม

ส่วนสำคัญของ Source code ด้านบน คือส่วนของ javascript จากตัวอย่าง เราใช้ function on('channg') ในการตรวจสอบค่าของ Listbox ถ้าเป็น yes ให้แสดง และถ้าเป็น no ให้ซ่อน Textbox

ในตัวอย่างเราสามารถซ่อน Textbox ได้ที่ละ 1 id แต่ เราสามารถซ่อน Textbox หรือแม้แต่ DIV ได้เลยละหลาย ๆ ส่วนพร้อมกันเพียงเปลี่ยน

$('#id') เป็น $('.class') แทน เท่านี้เราก็จะสามารถ ซ่อน/แสดง Object ได้ครั้งละหลาย ๆ ชิ้นพร้อมกัน