将值设置为父's的父's的孩子'在Ajax调用之后的兄弟

Set value to parent's parent's child's sibling after Ajax Call

本文关键字：Ajax 调用 之后 兄弟 孩子 设置 的父      更新时间：2023-12-22

我在两个div下有一个Dropdown。在更改值时，我会发出AJAX请求。之后，我得到值并存储在一个变量中。现在，我需要将接收到的值设置为当前DIV的父-父-兄弟-子。请参阅以下代码。

<div class="parentcontainer">
<div class="ui-block-a">
    <div class="psFieldLabel">Attendee</div>
    <div class="psFieldInput">
        <select name="namelist" id="nameListId" maxlength="50" class="required attendeeName">
            <option></option>
            <option value="Hari">Hari</option>
            <option value="Ramesh">Ramesh</option>
            <option value="Kumar">Kumar</option> 
        </select>
    </div>                                 
</div>
<div class="ui-block-b">
    <div class="psFieldLabel">Description</div>
    <input type="text" name="descriptionName" id="descriptionId" value="0" class="psName description" />
</div>
</div>

在我的Javascript中：onchange of"atteeName"select class我正在进行Ajax调用并获取值。但我无法将收到的值推送到"descriptionName"类。

注意：在一个按钮上单击，我会多次动态生成上面的标记（"parentcontainer"类）。因此，每当我更改下拉列表值时，都应该更新相应的描述值。但不是在下一个"parentcontainer"上。

尝试过这个，但不起作用：

$(this).parent().parent().siblings(".description").val(ajaxResult);

在此代码中

$(this).parent().parent().siblings(".description").val(ajaxResult);

正如您在ajax成功中提到的那样，这里$(this)不会指向您更改后的下拉列表。以下是你能做的。

制作一个变量来存储触发更改事件的下拉列表，然后导航到父级并执行您的操作。像这个

   var $dropdown= $(this); // inside your change event save the dropdown into a variable.
   $.ajax({
     ...
     ...
     success: function(ajaxResult){
       $dropdown.parent().parent().siblings(".description").val(ajaxResult); 
       // navigate from the dropdown.
     }
   });

还有一个指针：如果标记中输入的id是唯一的，那么您可以直接执行此操作。$('#descriptionId').val(ajaxResult)

对于我的答案，我想$(this)是选择。

你这里有问题，看：

<!-- PARENT 3 -->
<div class="parentcontainer">
    <!-- PARENT 2 -->
    <div class="ui-block-a">
        <div class="psFieldLabel">Attendee</div>
        <!-- PARENT 1 -->
        <div class="psFieldInput">
            <select name="namelist" id="nameListId" maxlength="50" class="required attendeeName">
                <option></option>
                <option value="Hari">Hari</option>
                <option value="Ramesh">Ramesh</option>
                <option value="Kumar">Kumar</option> 
            </select>
        </div>                                 
    </div>
    <div class="ui-block-b">
        <div class="psFieldLabel">Description</div>
        <input type="text" name="descriptionName" id="descriptionId" value="0" class="psName description" />
    </div>
</div>

您只呼叫parent()两次：

$(this).parent().parent().siblings(".description").val(ajaxResult);

尝试再次调用parent()。

您还应该替换.siblings为什么是.find，因为描述字段不是parentContainer 的直接同级字段

编辑

正如Reddy所提到的，如果您在ajax回调中进行编码，则应该使用select的引用，而不是使用$(this)，因为在回调中，this指的是回调函数：

var select = $(this);
$.ajax({
     // some arguments
     // ....
     success: function(ajaxResult){
        select.parent().parent().parent().find(".description").val(ajaxResult);
     }
   });
相关文章：