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());
    });
});

哪一个适用于一个下拉，但显然对另一个没有任何作用。有任何想法吗？我尝试了一些我发现的解决方案，但绝对没有成功。谢谢你的期待！

非常感谢那些回答我问题的人！在您的指导下，我能够完美地获得以下代码。请注意，我DID在我的选择框

中添加了一个额外的类

    $(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（无论如何应该是唯一的）或类名称（应在其命名中适当隔离）。

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);
    });
});

View Example

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 Fiddle demo

进一步修改，使用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 Fiddle demo

对同一解决方案采用非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 Fiddle demo

使用Jquery从两个下拉列表填充输入

非常感谢那些回答我问题的人！在您的指导下，我能够完美地获得以下代码。请注意，我DID在我的选择框

3 个答案: