Question

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

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

这是我到目前为止所拥有的，如果有任何解决方案或方法我可以得到这个工作，我将非常感激。

注意：我有更多的国家/地区代码而不是列出的代码，但您只需了解一些我就可以了解设置。

谢谢！

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

基本上，您已获取当前号码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/

Answer 2

可以是一个好的开始：

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/

无法使用数组从下拉列表中获取文本字段值

2 个答案: