使用數組無法從下拉列表中獲取文本字段值

我正嘗試根據用戶所在國家/地區的下拉列表中選擇的內容更改電話號碼的文本字段值。使用數組無法從下拉列表中獲取文本字段值

用戶應該選擇他們的國家，然後在他們輸入他們的電話號碼之前或之後我需要將國家代碼填充到電話號碼文本框中。

這是我到目前爲止，如果任何人有任何解決方案或方式我可以得到這個工作，我將非常感激。

注意：我有更多的國家代碼比上市，但你會得到一個想法，包括我只包括幾個設置。

謝謝！

var phoneNum = jQuery('#l_tel').val(); 
jQuery(function() { 
console.log(phoneNum); 
var selectValues = { 
"AF" : "93 " + phoneNum, 
"AX" : "358 " + phoneNum, 
"AL" : "355 " + phoneNum, 
"DZ" : "213 " + phoneNum, 
"AS" : "1 684 " + phoneNum, 
"AD" : "376 " + phoneNum, 
"AO" : "244 " + phoneNum, 
"AI" : "1 264 " + phoneNum, 
}; 

var jPhone = jQuery('#l_tel').val(); 
var jCountry = jQuery('select.country'); 
jCountry.change(function() { 
    phoneNum = jQuery('#l_tel').val(); 
    jPhone.empty().append(function() { 

    var output = ''; 
     jQuery.each(selectValues[jCountry.val()], function(key, value) { 
      output += key; 
     }); 
     return output; 
      }); 
}).change(); 
jQuery('select.country').val(''); 
});

來源

2014-11-05 user3593878

基本上你拿現在的數目jQuery('#l_tel').val()，並添加國家數selectValues[jCountry.val()]它。然後使用jQuery('#l_tel').val(...)設置新號碼。

您還必須記住上一次選擇的國家/地區號碼，以便將其從phoneNum中刪除，否則您會以舊國家/地區號碼和新選定的國家/地區號碼結尾。

var countryNum; 
var jPhone = jQuery('#l_tel'); 
var jCountry = jQuery('select.country'); 
jCountry.change(function() { 
    var phoneNum = jPhone.val(); 

    // remove the previous selected country number 
    //^means that it should only be replaced if the string starts with this number 
    if (countryNum) { 
     phoneNum = phoneNum.replace(new RegExp("^" + countryNum), ""); 
    } 

    countryNum = selectValues[jCountry.val()]; 
    var newPhoneNum = countryNum + phoneNum; 
    jPhone.val(newPhoneNum); 
}).change();

注意：您必須使用jPhone.val()來設置文本字段的值。

工作示例：http://jsfiddle.net/uLcxqvxo/

來源

2014-11-05 21:45:07 lloiser

我不確定，但爲什麼你有var countryNum沒有價值？ – user3593878 2014-11-05 21:54:29

一旦你調用'change（）'（最後一行），它就會被設置 – lloiser 2014-11-05 21:56:47

可以是一個良好的開端：

HTML：

<select id="countries"> 
    <option value="" selected>Choose country...</option> 
    <option value="93">AF</option> 
    <option value="358">AX</option> 
    <option value="355">AL</option> 
    <option value="213">DZ</option> 
    <option value="1 684">AS</option> 
    <option value="376">AD</option> 
    <option value="244">AO</option> 
    <option value="1 264">AI</option> 
</select> 
<input id="tel" value="" />

JAVASCRIPT：

$(function() { 

    var jSel = $('#countries'); 
    var jTel = $('#tel'); 
    var separator = '-'; 
    var lastPrefix = ''; 

    // Bind on change event 
    jSel.on('change', function() { 

     var prefix = ''; 
     var option = $(this).find(":selected").val(); 

     if (option != '') { 
      prefix = option + separator; 
     } 

     // get Tel 
     var currentTel = jTel.val(); 

     // check if the tel already contains the separator 
     var r = new RegExp(separator,"g"); 
     if(lastPrefix != '' && currentTel.match(r) != null) { 
      currentTel = currentTel.split(separator); 
      currentTel.shift(); 
      currentTel = currentTel.join(separator); 
     } 

     jTel.val(prefix + currentTel); 

     lastPrefix = prefix; 
    }); 

});

Working example on JsFiddle : http://jsfiddle.net/z8fe5ovc/2/

來源

2014-11-05 22:36:10 wawawoom

使用數組無法從下拉列表中獲取文本字段值

回答

相關問題