Javascript 使用数组从下拉列表中获取文本字段值时出现问题

我正在尝试根据用户所在国家/地区下拉列表中选择的内容更改电话号码的文本字段值

用户应该选择他们的国家，然后在他们输入电话号码之前或之后，我需要在电话号码文本框中填入国家代码

这是我迄今为止所拥有的，如果有人有任何解决方案或方法，我会非常感激

注意：我的国家/地区代码比列出的要多，但你会对我的设置有所了解，包括一些

谢谢

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

---

基本上，您需要获取当前号码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来设置文本字段的值

工作示例：

可以是一个良好的开端：

HTML:

---

我不确定，但为什么var countryNum没有值呢？不管怎样，只要调用change last行，就会设置它

<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="" />

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

});