<jsp>如何使用选择框选项</jsp>显示不同的输入文本框

Question

我有以下代码

<tr>
  <td colspan="3">
    <select name="selectOp" id="selectOp" style="height:19px;">
        <option value="clipNo">CLIP NO</option>
        <option value="tapeNo">TAPE NO</option>
        <option value="cdNa">CONTENT NAME</option>
    </select>
        <c:if test="${selectOp == 'clipNo'}" >
            <span class="br"><input type="text" id="searchWord" name="searchWord" style="width:500px;height:19px;" /></span>
        </c:if>
        <c:if test="${selectOp == 'tapeNo'}" >
            <span class="br"><input type="text" id="searchWord2" name="searchWord2" style="width:500px;height:19px;" /></span>
        </c:if>
        <c:if test="${selectOp == 'tapeNo'}" >
            <span class="br"><input type="text" id="searchWord3" name="searchWord3" style="width:500px;height:19px;" /></span>
        </c:if>
  </td>
</tr>

如果我选择clipNo，则搜索栏应为id =“searchWord”name =“searchWord”

如果我选择tapeNo，则搜索栏应为id =“searchWord2”name =“searchWord2”

如果我选择videoNo，则搜索栏应为id =“searchWord3”name =“searchWord3”

但由于某种原因，搜索栏没有显示出来。有人可以帮忙吗？

Answer 1

使用JavaScript / jQuery函数生成动态文本域

JSP

<select name="selectOp" id="selectOp" style="height:19px;" onchange="dynamicTextField()">
    <option value="clipNo">CLIP NO</option>
    <option value="tapeNo">TAPE NO</option>
    <option value="cdNa">CONTENT NAME</option>
</select>
// div to add text fields dyanamically using jQuery
<div id="dyanamicDivElement"></div>

的JavaScript / jQuery的

function dynamicTextField()
{
    var selectVal = $('#selectOp').val();
    if(selectVal == "clipNo")
    {
        var newTextField = "<span class='br'><input type='text' id='searchWord' name='searchWord' style='width:500px;height:19px;' /></span>";
        $('#dyanamicDivElement').append(newTextField);
    }
    else if(selectVal == "tapeNo")
    {
        var newTextField = "<span class='br'><input type='text' id='searchWord2' name='searchWord2' style='width:500px;height:19px;' /></span>";
        $('#dyanamicDivElement').append(newTextField);
    }
    else if(selectVal == "videoNo")
    {
        var newTextField = "<span class='br'><input type='text' id='searchWord3' name='searchWord3' style='width:500px;height:19px;' /></span>";
        $('#dyanamicDivElement').append(newTextField);
    }
}

相关链接

• jQuery .append()

---

现在回答你的问题

  

但由于某种原因，搜索栏没有显示出来。

这是因为在页面，请求，会话，应用程序范围内没有像${selectOp}这样的变量。它是HTML元素。

Web容器通过根据PageContext.findAttribute(String)的行为查找其值来评估表达式中出现的变量。
例如，在评估表达式${selectOp}时，容器将在页面，请求，会话和应用程序范围中查找selectOp并返回其值。如果找不到selectOp，则会返回null。

相关链接

• EL variables