javascript - 使用 Jquery 从两个下拉菜单中填充输入

Question

所以我有一个输入字段，我试图使用两个单独的下拉菜单来填充它。我目前可以使用一个下拉菜单，但我不能做两个。这是我要完成的示例:

<select type="text" id="make">
    <option value="">- select one -</option>
    <option value="chevy">Chevy</option>
</select>
<select type="text" id="model">
    <option value="">- select one -</option>
    <option value="silverado">Silverado</option>
</select>
<input type="text" id="input" value="" />

因此，如果两个字段都被选中，文本输入的值应该是“Chevy Silverado”。这是我到目前为止的脚本:

$(function(){
    $('select#make').bind('change', function(){
        $('input#input').val($(this).val());
    });
});

这对一个下拉菜单很有效，但显然对另一个下拉菜单不起作用。有任何想法吗？我尝试了一些我发现完全没有成功的解决方案。感谢您的关注!

非常感谢那些回答我问题的人!在您的指导下，我能够让下面的代码完美地为我工作。请注意，我确实在我的选择框中添加了一个额外的类

    $(function(){
    var $makemodel = $('.makemodel');
    $('.makemodel').on('change',function(){
        $('#input').val($makemodel.eq(0).val()+' '+$makemodel.eq(1).val());
    });
});

Answer 1

没问题!请原谅这个答案的长度，它提供了多种选择，具体取决于您是否更重视代码可读性与效率。它只会在速度上产生微小的差异，但希望它能激发您在整体代码中考虑速度!

简单的解决方案:

$('#make,#model').on('change',function(){
    $('#input').val($('#make').val()+' '+$('#model').val());
});

更高效:

给你的select一个类:

<select type="text" id="make" class="MakeModel">
    <option value="">- select one -</option>
    <option value="chevy">Chevy</option>
</select>
<select type="text" id="model" class="MakeModel">
    <option value="">- select one -</option>
    <option value="silverado">Silverado</option>
</select>
<input type="text" id="input" value="" />

然后在类上选择:

$('.MakeModel').on('change',function(){
    $('#input').val($('#make').val()+' '+$('#model').val());
});

给它一个类只是让解析器更容易只查询一个选择器而不是两个。

最有效:

使用适当的 .eq() 值和缓存而不是再次查询 ID 选择器:

var $makemodel = $('.MakeModel');

$makemodel.on('change',function(){
    $('#input').val($makemodel.eq(0).val()+' '+$makemodel.eq(1).val());
});

这意味着不需要重新查询选择项，因为 .MakeModel 的所有对象都包含在缓存的 $makemodel 下的函数中，您只需指定引用特定对象的对象订单号。

jsFiddle to show what I mean here

补充说明:

请注意使用 .on 而不是 .bind，这是现代 jQuery 应用程序更正确的语法。

此外，在 ID 或类之前使用标记名实际上会降低选择器的效率，因为解析器需要验证 ID/类是否与标记相关联，而不是仅仅获取 ID(无论如何都应该是唯一的)或类名称(应在其命名中适当隔离)。