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

时间:2014-11-26 09:30:56

标签: javascript jquery asp.net

我试图将菜单中的选定值转换为国家/地区变量,但我一直收到错误:未定义无参数构造函数。

通过单击“保存”按钮调用UpdateClient函数。

我使用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>

选择所选项目时我做错了什么?这是否是正确的方法呢?所有其他变量从文本框中获取正确的值。

3 个答案:

答案 0 :(得分:1)

我会这样做:

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

答案 1 :(得分:1)

要获取所选选项的值,您在jquery中不需要这么复杂的选择器,加.text()不是获取值的正确函数:

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

就够了
更新
我对ASP一无所知,但在你的上下文中,这将是:

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

答案 2 :(得分:1)

试试这个: -

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,即点击按钮的上下文,并找到下拉列表中的下拉值。相同的背景。所以在这里我们首先找到包含Save按钮和&amp;的封闭Div。在这种背景下降。找到ParentDiv之后,只需在该上下文中搜索该下拉列表。

请注意,您需要使用select而不是input来下拉。