如果文本框中的值大于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();