javascript - 如果文本框中的值大于 1，则更改为复数

Question

我有一个像这样的文本框和一个选择框:

<h3>Recipe Yield</h3>
<input style='width:100px' type="text" name="yield" class="small" />
<select name='yieldType'>
    <option value='Servings'>Serving(s)</option>
    <option value='Cups'>Cup(s)</option>
    <option value='Loaves (Loaf)'>Loaves (Loaf)</option>
</select>

这是一个 JSFiddle:http://jsfiddle.net/T3Sxb/

如您所见，选择选项的形式为word(s)

但我想在什么时候有一个脚本

• 如果输入框中的数字为1，则选项中的值为word的形式
• 如果输入框中的数字大于1，则选项中的值为复数。

这可能吗？我怎样才能做到这一点？感谢所有帮助!

Answer 1

• 演示:http://jsfiddle.net/T3Sxb/8/
• 交替使用 input[type="number"]:http://jsfiddle.net/T3Sxb/15/
• 多个输入，样式:http://jsfiddle.net/T3Sxb/17/

我正在使用数据属性，以便您可以为每个项目声明正确的单数/复数形式。在许多情况下，简单地添加“s”是行不通的。

另请注意，零项通常(总是？)采用复数形式。

HTML

<input style='width:100px' type="text" id="yield" class="small" />
<select id='yieldType'>
    <option value='Servings' data-single="Serving" data-other="Servings"></option>
    <option value='Cups' data-single="Cup" data-other="Cups"></option>
    <option value='Loaves (Loaf)' data-single="Loaf" data-other="Loaves"></option>
</select>

JavaScript

var yield = $("#yield");
var yieldType = $("#yieldType");

function evaluate(){
    var single = parseInt(yield.val(), 10) === 1;
    $("option", yieldType ).each(function(){
        var option = $(this);
        if(single){
            option.text(option.attr("data-single"));
        }else{
            option.text(option.attr("data-other"));
        }
    });
}

// whatever events you want to trigger the change should go here
yield.on("keyup", evaluate);

// evaluate onload
evaluate();