1

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

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

3 回答 3

4

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

简单的解决方案：

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

更高效：

给你的selectsa 课：

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

于 2013-05-21T20:27:23.107 回答
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);
    });
});

查看示例

于 2013-05-21T20:23:56.150 回答
2

我建议对 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 小提琴演示。

进一步修改，使用 aclass来标识摘要元素（将插入值的文本输入）减少了对已知元素的依赖，并允许使用更通用的代码：

$('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 小提琴演示。

于 2013-05-21T20:36:18.597 回答