使用数组从下拉列表获取文本字段值时遇到问题

Question

I am trying to change a text field value for a phone number based on what is selected in a drop down for the user's country.

The user should select their country and then either before or after they've typed in their phone number I need the country code to be populated into the phone number text box.

Here is what I have so far, if anyone has any solutions or ways I can get this working I would be very grateful.

NOTE: I have waaay more country codes than listed, but you'll get an idea of the setup with my including just a few.

Thanks!

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

Answer 1

Basically you have take the current number jQuery('#l_tel').val() and add the country number selectValues[jCountry.val()] to it. Then use jQuery('#l_tel').val(...) to set the new number.

You have also to remember the previous selected country number to remove it from the phoneNum because otherwise you would end up with the old country number AND the new selected country number.

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

note: you have to use jPhone.val() to set value of the text field.

working example: http://jsfiddle.net/uLcxqvxo/

Answer 2

Can be a good start :

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/