Question

这涉及HTML表单中的javascript。我遇到的问题是根据另一个字段的用户输入以相同的形式填充字段。当用户输入字母等级（A，B或C）时，我试图将百分比字段更新为100或75，具体取决于字母等级（A＆amp; B = 100，C = 75）。以下是我到目前为止所尝试的内容，它似乎无法正常工作。

function PercentResult(grade)
{
  if (grade.equalsIgnoreCase("A"))
  {
    return 100;
  }
  if (grade.equalsIgnoreCase("B"))
    return 100;
  if (grade.equalsIgnoreCase("C"))
    return 75;
  return 0;
}

Answer 1

Javascript中没有“equalsIgnoreCase”;你可能会对来自完全不同的语言Java的东西感到困惑。

我只是使用查找：

function percentResult(grade) {
  var grds = { 'A': 100, 'B': 100, 'C': 75 };
  return grds[grade.toUpperCase()];
}

（有一些方法可以定义更有效的查找，但这只是一个例子。）

编辑 - 谷歌搜索我确实找到了几个为Javascript做“equalsIgnoreCase”的示例实现，但它们大多是围绕上限或下限值的比较的简单包装器。在这种情况下，无论如何都不需要它。

Answer 2

最简单的方法是使用约束集 - 组合框输入框

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Grades</title>
</head>
<body>
    <form>
        <table>
            <tr>
                <td>Combo Box</td>
                <td>
                    <select id="combo1" name="combo1" onchange="input1.value = combo1.value">
                        <option value="100">A</option>
                        <option value="75">B</option>
                        <option value="50">C</option>
                        <option value="25">D</option>
                        <option value="0"">E</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Input Box</td>
                <td>
                    <input type="text" name="input1" id="input1"/>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

除此之外，或者如果你真的需要事件处理程序，你应该这样编写它们。这是一个做你想做的小例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Grades</title>
<script type="text/javascript">
    function eventHandler() {
        var target = document.getElementById('input1');
        var value = document.getElementById('input2').value;
        value = value.trim().toUpperCase();
        if( value == "A" ) {
            target.value = "100%";          
        }
        else if( value == "A" ) {
            target.value = "100%";          
        }
        else if( value == "B" ) {
            target.value = "75%";           
        }
        else if( value == "C" ) {
            target.value = "50%";           
        }
        else if( value == "D" ) {
            target.value = "25%";           
        }
        else if( value == "E" ) {
            target.value = "0%";            
        }
    }
</script>
</head>
<body>
<form>
<table>
    <tr>
        <td>Combo Box</td>
        <td><input type="text" name="input2" id="input2"
            onblur="eventHandler()" onchange="eventHandler" value="A" /></td>
    </tr>
    <tr>
        <td>Input Box</td>
        <td><input type="text" name="input1" id="input1" /></td>
    </tr>
</table>
</form>
</body>
</html>

其中一些内容可能非常快速地依赖浏览器，因此请务必查看您要定位的浏览器的js api文档。

Javascript函数，用于根据另一个字段中的用户输入填充字段

2 个答案: