select选项value首字母大写时JS控制div显隐失效的解决方法

JS 字符串相等判断默认严格区分大小写，你将选项 value 从全小写periodica修改为首字母大写的Periodica后，原有判断逻辑中写死的全小写匹配字符串无法和新值对应，自然会失效。
由于业务要求表单提交时必须保留首字母大写的Periodica值，不需要修改提交值本身，任选下面一种方案修改即可解决问题。

方案1：判断时统一转小写匹配（推荐，维护成本低） #

不需要改动 HTML 中 option 的提交值，仅在 JS 逻辑里将获取到的元素值统一转为小写后再做比对，完全不影响表单实际提交的内容，后续就算value大小写再调整，只要拼写不变就不会失效。
修改后的完整代码如下：

JS 部分 #

function showDiv(divId, element) {
  // 取值时临时转小写做匹配，不会修改元素本身的value属性
  document.getElementById(divId).style.display = element.value.toLowerCase() === "periodica" ? 'block' : 'none';
}

CSS 部分（无需修改） #

#hidden_div {
  display: none;
}

HTML 部分 #

仅需要把对应选项的value改成业务要求的首字母大写格式即可，其他逻辑不动：

<select required name="tdonacion" class="form-control form-group col-md-12" onchange="showDiv('hidden_div', this)">
  <option value="Puntual">Puntual</option>
  <!-- 按业务要求设置为首字母大写的提交值 -->
  <option value="Periodica">Periódica</option>
</select>

<div id="hidden_div">
  <select required name="dperiodica" class="form-control form-group col-md-12">
    <option value="Mensual">Mensual</option>
    <option value="Trimestral">Trimestral</option>
    <option value="Semestral">Semestral</option>
    <option value="Anual">Anual</option>
  </select>
</div>

方案2：直接修改判断条件的匹配值 #

如果不想做大小写转换，也可以直接把JS判断里的对比字符串改成和新value完全一致的格式，写法更直接：

function showDiv(divId, element) {
  // 直接匹配首字母大写的目标值
  document.getElementById(divId).style.display = element.value === "Periodica" ? 'block' : 'none';
}

注意：该方案要求判断条件中的字符串必须和option的value值大小写、拼写完全一致，后续如果调整value的大小写格式，必须同步修改这里的判断条件，否则会再次出现匹配失效问题。

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