使用 jQuery 按名称属性获取选择值

Get select value by name attribute using jQuery

本文关键字：获取选择属性 jQuery 使用更新时间：2023-09-26

我正在尝试将菜单中的选定值获取到国家/地区变量中，但不断收到错误：未定义无参数构造函数。

更新客户端函数通过单击按钮保存来调用。

我正在使用 parent（）和 find（）函数来获取该控件，但我想我以错误的方式使用它们。

这是我的脚本：

function UpdateClient() {
    var ar = $(this).parent().parent().parent().find('.clientIdValue').val();
    var name = $(this).parent().parent().parent().find($('input[name=cname]')).val();
    var address = $(this).parent().parent().parent().find($('input[name=caddress]')).val();
    var zip = $(this).parent().parent().parent().find($('input[name=czip]')).val();
    var city = $(this).parent().parent().parent().find($('input[name=ccity]')).val();
    var country = $(this).parent().parent().parent().find($('select[name=ccountries] option:selected').text());
    $.ajax({
        type: "POST",
        url: 'clients.aspx/UpdateClient',
        data: JSON.stringify({ "ID": ar, "ClientName": name, "Address": address, "ZipCode": zip, "city": city, "Country": country}),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccessUpdate,
        error: OnErrorUpdate,
    });
    function OnSuccessUpdate(data) {
        window.location.reload();
    }
    function OnErrorUpdate(result) {
        console.log(result);
    }
}

这是我在aspx页面上的HTML：

<asp:Repeater ID="clientRepeat" runat="server">
    <ItemTemplate>
        <div class="item">
            <div class="heading">
                <span>
                    <asp:Label runat="server" ID="TeamMemberName" Text='<%#Eval("ClientName")%>'></asp:Label></span>
                <i>+</i>
            </div>
            <div class="details">
                <input type="hidden" name="clientID" class="clientIdValue" value="<%#Eval("ClientID")%>" />
                <ul class="form">
                    <li>
                        <label>Client name:</label>
                        <input type="text" class="in-text" name="cname" value="<%#Eval("ClientName") %>" />
                    </li>
                    <li>
                        <label>Zip/Postal code:</label>
                        <input type="text" class="in-text" name="czip" value="<%#Eval("ZipCode") %>" />
                    </li>
                </ul>
                <ul class="form">
                    <li>
                        <label>Address:</label>
                        <input type="text" class="in-text" name="caddress" value="<%#Eval("Address") %>" />
                    </li>
                    <li>
                        <label>Country:</label>
                        <select name="ccountries">
                            <option value="AF">Afghanistan</option>
                            <option value="AX">Aland Islands</option>
                            <option value="AL">Albania</option>
                            <option value="DZ">Algeria</option>
                            <option value="AS">American Samoa</option>
                            <option value="AD">Andorra</option>
                            <option value="AO">Angola</option>
                            <option value="AI">Anguilla</option>
                            <option value="AQ">Antarctica</option>
                            <option value="AG">Antigua and Barbuda</option>
                            <--...And all the others...-->
                        </select>
                    </li>
                </ul>
                <ul class="form last">
                    <li>
                        <label>City:</label>
                        <input type="text" class="in-text" name="ccity" value="<%#Eval("City") %>" />
                    </li>
                </ul>
                <div class="buttons">
                    <div class="inner">
                        <button class="btn green" onclick="UpdateClient.call(this);">Save</button>
                        <button class="btn red" onclick="DeleteClient.call(this);">Delete</button>
                    </div>
                </div>
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

我在选择所选选项时做错了什么？这甚至是正确的方法吗？所有其他变量从文本框中获取正确的值。

要获取所选选项的值，您不需要在 jquery 中使用如此复杂的选择器，而且 .text() 不是获取值的正确函数：

$('select[name=ccountries]').val();

就够了。

更新：
我对ASP一无所知，但在您的上下文中，这将是：

var country = $(this).parent().parent().parent().find('select[name=ccountries]').val();

我会这样做：

function updateClient() {
    // Store the parent in a variable to avoid calling so many functions
    // var $parent = $(this).parent().parent().parent(); // This is not ideal, as your HTML markup could change
    // You already have a class for this, so use it!
    var $parent = $(this).parents('.item').eq(0).find('.details');
    var ar = $parent.find('.clientIdValue').val();
    var name = $parent.find($('input[name=cname]')).val();
    var address = $parent.find($('input[name=caddress]')).val();
    var zip = $parent.find($('input[name=czip]')).val();
    var city = $parent.find($('input[name=ccity]')).val();
    var country = $parent.find($('select[name=ccountries]').val());
    $.ajax({
        type: "POST",
        url: 'clients.aspx/UpdateClient',
        data: JSON.stringify({ "ID": ar, "ClientName": name, "Address": address, "ZipCode": zip, "city": city, "Country": country}),
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    }).then(onSuccessUpdate) // Use promise-like feature of $.ajax
    .fail(onErrorUpdate); // Use promise-like feature of $.ajax
     // Keep uppercase for functions that are designed to be called as constructors
    function onSuccessUpdate(data) {
        window.location.reload();
    }
    function onErrorUpdate(result) {
        console.log(result);
    }
}

试试这个：-

var ParentDiv = $(this).parents('.details')[0];
var country = $('select[name="ccountries"]', ParentDiv).val();

同样，您可以使用此父上下文找到其他值：-

var ar = $('.clientIdValue',ParentDiv).val();
var name=$('input[name=cname]',ParentDiv).val();

-

-等等。

由于它是一个repeater控件，因此每个项目都会对不同的项目重复自己，因此我们需要找到ParentDiv，即单击按钮的上下文，并找到同一上下文中存在的下拉值。所以在这里我们首先找到封闭的 Div，它包含该上下文中的保存按钮和下拉列表。找到 ParentDiv 后，只需在该上下文中搜索该下拉列表即可。

请注意，您需要使用select而不是input下拉菜单。