如何使文本框出现后，用户选择特定的值从下拉使用javascript

How to make textbox appear after user selects specific value from dropddown using javascript

本文关键字：javascript 选择 文本 何使 用户      更新时间：2023-09-26

我正在使用jstl库迭代数组列表并创建下拉列表。我的要求是，只要用户点击'Others'这是下拉列表中的选项之一，应该出现一个可编辑的文本框。

我搜索了各种网站，并尝试使用java脚本来解决问题，但在选择"其他"时没有任何反应。

jsp代码:

<form:form method="get" action="ghdgfd">
<c:if test="${fn:length(listOfParams) gt 0}">
    <c:forEach var="temp" items="${listOfParams}">
        <h3>${temp.paramName}</h3>
        <select name="${temp.paramName}" id="${temp.paramName}" class="target1" onchange='CheckColors(this.value,${temp.paramName});'>
            <c:forEach var="temp1" items="${temp.listOfParamValue}">
                <option><c:out value="${temp1}" /></option>
            </c:forEach>
        </select>
        <input type="text" name="${temp.paramName}" id="${temp.paramName}" style='display:none;'/>
    </c:forEach>
         <input type="submit" value="Submit">
</c:if>
</form:form>
<script type="text/javascript">
    function CheckColors(val1,val2) {
        var element = document.getElementById(val2);
        if (val == 'Others')
            element.style.display = 'block';
        else
            element.style.display = 'none';
    }
</script>

请帮助..我是新的javascript。任何帮助将不胜感激!!

在您的函数中，一切正常。您可以将alert放在if-else块中以检查哪个正在工作，并使用firebug/chrome开发人员工具栏来检查您的jsp是否按预期生成输出，而不是为textarea使用相同的id两次。

或者，您可以使用jQuery解决方案。只需将下面的代码替换为您的函数，并从select标记中删除onclick事件处理程序。

jQuery(document).ready(function(){
    jQuery('select').each(function(){
       jQuery(this).on('change', function(){
         var $this = jQuery(this);
          if($this.val() === 'Others') {
             $this.siblings(':text').show();
          } else {
             $this.siblings(':text').hide();
          }
       });
    });
});
相关文章：