基于下拉框值自动隐藏表单文本框的加载异常问题

问题分析 #

你遇到的核心问题是：页面初始化时，虽然下拉框idtaxonomicstatus默认选中了值为1的"Aceptado/Válido"选项，但文本框acceptednameusageid既没有自动隐藏，还保留着初始值11943——只有手动切换下拉框选项后，逻辑才会生效。

这是因为当前代码只绑定了下拉框的change事件，页面加载时不会自动触发这个事件，所以初始化状态完全没被处理。

解决方案 #

我们需要把下拉框的显示/隐藏逻辑抽成独立函数，然后在页面加载完成后主动调用一次这个函数，同时在逻辑里加上清空文本框值的操作。

修改后的完整代码 #

HTML部分（保留原结构，无需改动）

<div id="caja" class="formularios ico_esq_especies"> 
  <h2>Alta nombre sinónimo del taxon <i>Lynx pardinus (Temminck, 1827)</i></h2> 
  <form id="modificaNombreSinonimoForm" action="#" method="post"> 
    <input name="idTUsuarios" id="idTUsuarios" value="0" type="hidden"> 
    <input name="scientificname" id="scientificname" value="Lynx pardinus (Temminck, 1827)" type="hidden"> 
    <input name="pagPrev" id="pagPrev" value="" type="hidden"> 
    <input name="idTaxon" id="idTaxon" value="" type="hidden"> 
    <input name="scientificnameid" id="scientificnameid" value="11943" type="hidden"> 
    <div id="f_2colselect"> 
      <span class="tx_slect">Status:</span><br> 
      <div class="styled-select"> 
        <select id="idtaxonomicstatus" name="idtaxonomicstatus"> 
          <option value="">Seleccione...</option> 
          <option class="select" value="0">Desconocido</option>
          <option class="select" value="1" selected="selected">Aceptado/Válido</option>
          <option class="select" value="2">Sinonímia</option>
          <option class="select" value="3">Ambiguo</option> 
        </select> 
      </div> 
    </div> 
    <p class="f_2col">Identificador del taxon: <input id="acceptednameusageid" name="acceptednameusageid" value="11943" style="display: none;" type="text"> </p> 
    <p>* indica campo obligatorio</p> 
    <div id="botones"> 
      <input id="guardarNombreSinonimo" class="bt_derecha" value="Guardar" type="button"> 
      <input id="volver" class="bt_izquierda" value="Volver" type="button"> 
    </div> 
  </form> 
</div>

JavaScript部分（关键修改）

$(document).ready(function() {
  // 抽离逻辑为独立函数，方便复用
  function toggleAcceptedNameField() {
    var opcion = $("#idtaxonomicstatus").val();
    var acceptedField = $("#acceptednameusageid");
    
    if (opcion == "1" || opcion == "-1") {
      acceptedField.hide();
      acceptedField.val(""); // 清空文本框值
    } else {
      acceptedField.show();
      // 可选：显示时自动填充默认值（从隐藏域获取）
      // acceptedField.val($("#scientificnameid").val());
    }
  }

  // 页面加载时主动执行一次，处理初始状态
  toggleAcceptedNameField();

  // 下拉框变化时执行逻辑
  $("#idtaxonomicstatus").change(toggleAcceptedNameField);

  // 其他原有逻辑保持不变
  $("#volver").click(function(){
    var elem = document.createElement('textarea');
    elem.innerHTML = "/portal/site/iepnbPortal/template.PAGE/especies2/?javax.portlet.tpst=ea0cc0146a52b88ecb55b5b5235d20a0&javax.portlet.prp_ea0cc0146a52b88ecb55b5b5235d20a0=idEspecie%26accion%3DverFormConsultaEspeciesFiltrado&javax.portlet.begCacheTok=com.vignette.cachetoken&javax.portlet.endCacheTok=com.vignette.cachetoken";
    window.location.href = elem.value;
  });

  $("#guardarNombreSinonimo").click(function(){
    var error = false;
    var mensajeErrores = "";
    $("#alertas_obligatorias").html("");
    mensajeErrores = "<ul>";

    if($.trim($("#scientificname").val()) == ""){
      $("#scientificname").removeClass("campo_normal").addClass('campo_obligatorio');
      mensajeErrores = mensajeErrores+'<li>Campo <i>Nombre Sinónimo</i> es obligatorio</li>';
      error = true;
    }else {
      $("#scientificname").removeClass("campo_obligatorio").addClass("campo_normal");
    }

    if (error){
      mensajeErrores = mensajeErrores+'</ul>';
      $("#alertas_obligatorias").html(mensajeErrores);
      $("#alertas_obligatorias").show('slow');
    }

    if(!error){
      $("#modificaNombreSinonimoForm").attr("action", "/portal/site/iepnbPortal/template.PAGE/action.process/especies2/?javax.portlet.action=true&amp;javax.portlet.tpst=ea0cc0146a52b88ecb55b5b5235d20a0&amp;javax.portlet.prp_ea0cc0146a52b88ecb55b5b5235d20a0=accion%3DguardarNombreSinonimo%26javax.portlet.action%3Daction&amp;javax.portlet.begCacheTok=com.vignette.cachetoken&amp;javax.portlet.endCacheTok=com.vignette.cachetoken");
      $("#modificaNombreSinonimoForm").submit();
    }
  });

  $("#waiting").hide();
});

showAlert('Mensaje','Guardado correctamente','Aceptar');

关键改动说明 #

1. 抽离逻辑函数：把原来change事件里的代码放到toggleAcceptedNameField函数中，既可以在事件触发时调用，也能在页面初始化时主动执行。
2. 初始化时调用函数：在$(document).ready里第一时间调用toggleAcceptedNameField，确保页面加载完成后立刻处理初始状态。
3. 清空文本框值：当下拉框选中值为1或-1时，不仅隐藏文本框，还主动清空它的值，完全符合需求。
4. 可选优化：如果需要在显示文本框时自动填充默认值（比如从隐藏域scientificnameid获取），可以取消注释代码里的对应行。

这样修改后，页面加载时就会自动隐藏文本框并清空它的值，同时保留手动切换下拉框时的原有逻辑。

内容的提问来源于stack exchange，提问作者Bufank85