将选定的下拉列表前缀附加到 ajax 中的 url

Question

我有以下表单，它使用 ajax 从表单提交 phone 号码。我正在尝试将从下拉列表中选择的国家/地区代码附加到查询字符串。

这给了我正确的 URL 和 phone 数字：

$.ajax({
    url: '/textMessage/' + phone,
    method: "GET",
    success: function () {
        console.log(this);
    }
});

我想为从这个表格中选择的国家代码加上前缀：

<button id="label" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">+1 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="#" id="1">US: +1</a>
                  </li>
                  <li><a href="#" id="44">UK: +44</a>
                  </li>
                </ul>
              </div>

到url。所以 URL 应该显示为 domain.com/textMessage/12122225555

我尝试使用 this.options[this.selectedIndex].value 拉出选定的选项，并像这样添加它：url：'/textMessage/' + this.options[this.selectedIndex].value + phone, 但这不起作用。

jsfiddle

Answer 1

您可以将 ID（或 class 如果您愿意）添加到您的区号文本中，例如：

<button id="label" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <span id="areaCode">+1</span> 
    <span class="caret"></span>
</button>

您可以通过以下方式获取区号：

var areaCode = $('#areaCode').text();

并将其添加到您的 phone 号码前面，您可以这样做：

$.ajax({
    url: '/textMessage/' + areaCode + phone,

还需要修改区号点击事件为：

$("#1, #44").click(function (e) {
    $("#label").html('<span id="areaCode">+' + $(this).attr("id") + '</span> <span class="caret"></span>');
});

此外，如果您想去掉“+”号，那么您的 areaCode 将是：

var areaCode = $('#areaCode').text().replace('+','');

http://jsfiddle.net/1a8r5gmv/7/

将选定的下拉列表前缀附加到 ajax 中的 url

Appending selected dropdown prefix to url in ajax

ajax

jquery