使用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在这里显示我的意思

补充笔记：

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

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

Answer 2

简单的解决方案：

$(function() {
    $('#make, #model').on('change', function() {
        var makeCurr = $('#make').find(":selected");
        var madelCurr = $('#model').find(":selected");
        var make = (makeCurr.val() != '') ? makeCurr.text() : '';
        var model = (madelCurr.val() != '') ? madelCurr.text() : '';

        $('input#input').val(make + ' ' + model);
    });
});

查看范例

Answer 3

我建议对HTML进行一些修改，以将单个父元素内的select元素分组，并使用on()将该元素的change事件绑定到该元素：

<form action="#" method="post">
    <fieldset>
        <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="" />
    </fieldset>
</form>

使用jQuery：

$('fieldset').on('change', function(){
    var self = $(this);
    $('#input').val(function(){
        return self.find('select').map(function(){ return this.value; }).get().join(' ');
    });
});

JS小提琴演示 。

进行进一步的修改以使用一个class来标识摘要元素（将值插入到其中的文本输入），从而减少了对已知元素的依赖，并允许使用更多通用代码：

$('fieldset').on('change', function(){
    var self = $(this);
    self.find('.summary').val(function(){
        return self.find('select').map(function(){ return this.value; }).get().join(' ');
    });
});

JS小提琴演示 。

还有一种非jQuery的纯JavaScript方法来实现相同的解决方案（尽管仅在支持document.querySelector() / document.querySelectorAll()和addEventListener()浏览器中有效）：

function summarise(container, what, sumClass) {
    var els = container.querySelectorAll(what),
        sumTo = container.querySelector(sumClass),
        vals = [];
    for (var i = 0, len = els.length; i < len; i++) {
        vals.push(els[i].value);
    }
    sumTo.value = vals.join(' ').trim();
}

var fieldsets = document.querySelectorAll('fieldset');

for (var i = 0, len = fieldsets.length; i < len; i++) {
    fieldsets[i].addEventListener('change', function(){
        summarise(this, 'select', '.summary');
    }, false);
}

JS小提琴演示 。