使用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小提琴演示 。