JavaScript文本输入与下拉选择框的&&逻辑判断及强度计算问题

先梳理原代码存在的几个关键问题：

• 下拉框选中状态判断错误：通过attr('selected')判断选项选中状态不可靠，动态切换选项时容易出现偏差，应该直接获取下拉框的选中值
• 输入值判断语法错误：$(n.value == '30')是错误写法，会把布尔判断结果包装成jQuery对象，导致该条件永远为真
• 缺少事件触发：原函数没有绑定到输入框或下拉框的变更事件，无法自动触发计算
• 逻辑覆盖不全：仅处理了clay类型且n值为30的情况，未覆盖其他场景

修正后的完整代码 #

HTML部分（补充事件绑定触发逻辑）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="nvalue" name="nvalue" min="0" max="50" required />

<select class="select-box" name="soil_type" id="soil_type2">
  <option value="" disabled selected hidden>Type</option>
  <option value="clay">CLAY</option>
  <option value="silt">SILT</option>
  <option value="sand">SAND</option>
  <option value="gravel">GRAVEL</option>
</select>

<input type="text" id="soil_strength" name="soil_strength" placeholder="Strength" />

JavaScript部分（修正逻辑+添加自动触发）

function findStrength() {
  // 获取输入框数值并转为整数，避免字符串对比的潜在问题
  const nValue = parseInt(document.getElementById('nvalue').value, 10);
  // 直接获取下拉框选中值，简洁可靠
  const soilType = document.querySelector('.select-box').value;
  
  let strength = '';
  
  // 保留原需求的clay+30=HARD规则，可根据实际需求扩展其他判断
  if (soilType === 'clay' && nValue === 30) {
    strength = 'HARD';
  } 
  // 示例：添加其他土壤类型的判断规则
  else if (soilType === 'sand' && nValue > 40) {
    strength = 'VERY HARD';
  }
  // 更多规则可在此继续扩展
  
  // 将结果赋值到输出框
  document.getElementById('soil_strength').value = strength;
}

// 绑定事件：用户输入或切换土壤类型时自动计算
document.getElementById('nvalue').addEventListener('input', findStrength);
document.querySelector('.select-box').addEventListener('change', findStrength);

关键修正说明 #

1. 下拉框值获取优化：直接通过select元素的value属性获取选中值，比判断选项的selected属性更高效准确
2. 输入值类型处理：把输入框的字符串值转为整数，避免因输入空格、格式问题导致的对比错误
3. 语法错误修复：移除错误的$(n.value == '30')写法，改用直接的数值对比逻辑
4. 自动触发逻辑：给输入框添加input事件、下拉框添加change事件，确保用户操作时实时计算结果
5. 扩展性优化：采用分支结构编写判断逻辑，方便后续快速添加更多土壤类型和n值对应的强度规则

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