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

【问题标题】：Trouble getting text field value from a dropdown, using an array使用数组从下拉列表中获取文本字段值时遇到问题
【发布时间】：2014-11-05 21:05:57
【问题描述】：

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

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

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

注意：我的国家/地区代码比列出的要多，但您会了解我的设置，包括其中的几个。

谢谢！

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

【问题讨论】：

标签： javascript jquery forms oop webforms

【解决方案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/

【讨论】：

我不确定，但为什么你的 var countryNum 没有值？
一旦你调用change()（最后一行）就设置了

【解决方案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/

【讨论】：