2014-07-20 28 views
0

我有一個SELECT元素和一個窗體上的INPUT元素,我需要得到總是連接值(SELECT + INPUT的結果)當這兩個元素也更新了這包括:連接值,因爲他們正在鍵入或當選擇更改

  • 選擇更改所選值
  • 用戶開始打字輸入元素

但我不知道如何實現這一目標。見下面這個例子:

<select id="rif" name="rif" class="form-control"> 
    <option value="J">J</option> 
    <option value="G">G</option> 
    <option value="V">V</option> 
    <option value="E">E</option> 
</select> 

<input type="text" required="required" value="" name="_username" class="form-control numeric" id="username"> 

輸入值可以是:

select#rif = "J" 
input#username ="string" 
output = "Jstring" 


select#rif = "V" 
input#username ="str" 
output = "Vstr" 

但後來我離開input#username沒有改變,但改變select#rif如下:

select#rif = "J" 
input#username ="str" 
output = "Jstr" 


select#rif = "V" 
input#username ="str" 
output = "Vstr" 

換句話說串聯需求在方向和輸出值都應該改變時,選擇改變他們的選擇值或輸入改變其中的文本由ke是或任何其他事件。任何能給我一些幫助嗎?

+0

創建一個具有級聯,並將結果在正確的位置的功能。現在讓該函數成爲select上的change事件和input框上的keyup事件的事件處理函數。 –

+0

@JacobMattison很好,但如果你會成爲我,爲了得到預期的結果,你會輸入多少事件? – ReynierPM

回答

1

這應該工作:

$(function(){ 
    function result(){ 
     var s = $('#rif').find(":selected").val(), i = $('#username').val(); 

     return s + i; 
    } 

    $('#rif').on('change', result); 
    $('#username').on('keyup', result); 
}); 

首先聲明函數讀取的下拉和值輸入字段和回報這些的連接。最後,使用選擇菜單的更改事件和輸入的關鍵點來捕獲它們的編輯並將它們的結果作爲回調返回。

+0

如果用戶從contextmenu粘貼文本字段中的值,這將不起作用。你可能想引用[這個答案](http://stackoverflow.com/questions/24855087/concatenate-values-as-their-are-typing-or-when-select-changes/24855151#24855151) – sarbbottam

1

請參考fiddle

HTML:

<select id="select"> 
    <option value="A">A</option> 
    <option value="B">B</option> 
    <option value="C">C</option> 
    <option value="D">D</option> 
</select> 

<input type="text" id="text"> 

The result is <span id="result"></span> 

的JavaScript:

var selectNode = document.querySelector('#select'); 
var textNode = document.querySelector('#text'); 
var resultNode = document.querySelector('#result'); 

var updateResult = function(e) { 
    var result = selectNode.value + textNode.value; 
    resultNode.innerHTML = result; 
} 
selectNode.addEventListener('change', updateResult); 
textNode.addEventListener('input', updateResult); 
1

Javascript來聽兩個元素change荷蘭國際集團,然後給你的連接字符串

$('#rif, #username').on('change', function() { 
    var str = $('#rif').val() + $('#username').val(); 
    alert(str); 
}); 

演示:http://jsfiddle.net/robschmuecker/rGu4k/

相關問題