Javascript 如果Select tag更改其值，如何删除和创建带有其父元素的输入字段

我有一个包含四个文件的表，如图所示

Semester | Exam Status | GPA | Fee Status

我的问题是：当我更改

Exam\u Status

中的值时，

Select tag->

未被清除，那么

G.p.A

字段可以被删除，当我选择

cleared

时，它可以显示

G.p.A

字段

生成以下piture输出的HTML代码如下

<table cellspacing="0" cellpadding="0" border="0"> 
    <thead> 
       <tr>
           <th>Semester</th>
           <th>Cleared/Not Cleaerd</th>
           <th>G.P.A</th>
           <th>Fee Status</th>
       </tr>
    </thead>
    <tbody>  
       <script type="text/javascript"></script>
       <tr>
           <td>1<sup>st</sup> Semester</td>
           <td>
               <select name="fexam_status" id="waqas">
                   <option selected="selected">Select Here</option>
                   <option value="Cleared">Cleared</option>
                   <option value="Not Cleared">Not Cleared</option>
               </select>
           </td>
           <td>
               <div class="gpa" id="work">
                  <div class="right">
                     <input class="spin-dec" type="text" name="fgpa" value="3.00" min="1.00" max="4.00" />
                  </div>
               </div>
           </td>
           <td>
        <select name="ffee_status">
                                <option value="Cleared">Cleared</option>
                                <option value="Not Cleared">Not Cleared</option>
                                </select>
                                <a class="deleteRow" style="margin-left: 10px;"><img src="gfx/deletered.png" /></a>
                                </td>


                            </tr>

                            <tr>

                                <td>2<sup>nd</sup> Semester</td>

                                <td>
                                <select name="sexam_status">
                                <option selected="selected" value="Cleared">Cleared</option>
                                <option value="Not Cleared">Not Cleared</option>
                                </select>
                                </td>

                                <td>
                                <div class="gpa">
                                <div class="right">
                                <input class="spin-dec" type="text" name="sgpa" value="3.00" min="1.00" max="4.00" />
                                </div>
                                </div>
                                </td>

                                <td>
                                <select name="sfee_status">
                                <option selected="selected" value="Cleared">Cleared</option>
                                <option value="Not Cleared">Not Cleared</option>
                                </select>
                                <a class="deleteRow" style="margin-left: 10px;"><img src="gfx/deletered.png" /></a>
                                </td>

                            </tr>

                            <tr>

                                <td>3<sup>rd</sup> Semester</td>

                                <td>
                                <select name="texam_status">
                                <option selected="selected" value="Cleared">Cleared</option>
                                <option value="Not Cleared">Not Cleared</option>
                                </select>
                                </td>

                                <td>
                                <div class="gpa">
                                <div class="right">
                                <input class="spin-dec" type="text" name="tgpa" value="3.00" min="1.00" max="4.00" />
                                </div>
                                </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>

学期
已清除/未清除
G.P.A
费用状况
第一学期
选择这里
变明朗
未清除
变明朗
未清除
第二学期
变明朗
未清除
变明朗
未清除
第三学期
变明朗
未清除

---

同样，当我选择“费用”状态时，它可以显示一个输入标签，而不是“费用”状态中的“选择标签”

这里有一个快速解决方案：

---

它目前只适用于“已清除/未清除”下拉列表，不适用于“费用”下拉列表，但您得到了分数。对HTML代码的唯一更改是，我将“examStatus”类添加到select元素中，以便能够以统一的方式处理它们。

使用select BOX的

onchange

事件，例如：

…

，如您所见，我将当前select标记对象引用传递给函数

showHideGPA（）

以便函数能够确定更改了哪个选择框，并遍历dom以更改相应的表单元格。当然，您也可以使用选择框引用来检查其值并相应地执行操作。谢谢ANDRE，这正是我需要的。