ตัวอย่างการซ่อนหรือแสดง textbox เมื่อเปลี่ยนเงื่อนไขใน listbox

ตัวอย่างโค้ดนี้จะเป็นการใช้ javascript ในการซ่อนหรือแสดง textbox เมื่อเปลี่ยนเงื่อนไขใน listbox ซึ่งจาก code ตัวอย่างนี้เมื่อเปลี่ยนค่าใน listbox เป็น โสด ก็จะมี textbox ปรากฏขึ้นมาให้กรอก ชื่อ, นามสกุล และเลขประจำตัวประชาชน ขึ้นมา แต่ถ้าเปลี่ยนเป็นกรณีอื่น ๆ ก็จะไม่มี text box ปรากฏขึ้นมา ยังไงก็ลองนำไปประยุกต์ใช้ในการทำฟอร์มสำหรับกรอกข้อมูลได้น่ะครับ

ตัวอย่าง code 

<script>
function chksatatus(sx){
if (sx=="โสด"){
    document.getElementById('det1').style.display='none';
    document.getElementById('det2').style.display='none';
}else{
     document.getElementById('det1').style.display='block';
    document.getElementById('det2').style.display='block';
}
}
</script>
                    <select  onChange="chksatatus(this.value);" name="citizen_satatus"id="citizen_satatus">
            <option value="โสด">โสด</option>
            <option  value="สมรส"selected>สมรส</option>
            <option   value="หย่า">หย่า</option>
            <option   value="หม้าย">หม้าย</option>
          </select>

<table>

  <tr id='det1'>
    <td><div align="right">ชื่อคู่สมรส :&nbsp;</div></td>
    <td><label>
      <input name="citizen_namesamee" type="text" id="citizen_namesamee"  />
    </label></td>
    <td><div align="right">นามสกุล :&nbsp;</div></td>
    <td><label>
      <input name="citizen_surnamesamee" type="text" id="citizen_surnamesamee"  />
    </label></td>
  </tr>
  <tr id='det2'>
    <td><div align="right">รหัสบัตรประจำตัวประชาชนคู่สมรส :&nbsp;</div></td>
    <td><label>
      <input name="citizen_sameeid" type="text" id="citizen_sameeid" />
    </label></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  </table>