抓取选定的下拉列表项以添加到查询字符串

Question

正在尝试从下拉列表中获取所选项目，并添加到 ajax 调用的查询字符串中。我似乎无法抓住所选项目的价值。我正在尝试 $("select#areaCode").filter(":selected").val()，但无法抓取该项目。

$("#phone").validate({
    errorPlacement: function (error, element) {
        error.insertAfter($(element).parent('div'));
    },
    rules: {
        phone: {
            required: true,
            phoneUS: true
        }
    },
    messages: {
        phone: {
            phoneUS: "Please enter a valid US number",
            phoneUK: "Please enter a valid UK number"
        }
    },
    submitHandler: function (form) {
        $.ajax({
            url: '/textMessage/' + $("select#areaCode").filter(":selected").val() + $('input[name="phone"]').val(),
            method: "GET",
            success: function () {
                console.log(form);
            }
        });
        return false;
    }
});

<form id="phone">
        <div class="col-md-10">
            <div class="modal-header" style="text-align: center;">
                 <h5>Get a link on your phone</h5> 
                <div class="input-group">
                    <div class="input-group-btn">
                        <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>
                        <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>
                    <input class="form-control phone" name="phone" aria-label="..." placeholder="Your phone number" type="text"> <span class="input-group-btn">
              <input class="btn btn-default" type="submit">SUBMIT</input>
              </span>

                </div>
            </div>
        </div>
    </form>

Answer 1

使用 $("select#areaCode").find(":selected").val() 应该可以。

编辑

你应该改变：

<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>

至：

<select id="areaCodes">
   <option value="1">US: +1</option>
   <option value="44">UK: +44</option>
</select>

正在使用：

$("#areaCodes").find(":selected").val();

将return选择的选项值。

抓取选定的下拉列表项以添加到查询字符串

Grabbing selected dropdown list item to add to query string

jquery

drop-down-menu

listitem

编辑