【问题标题】:jquery want to get the immediate next input element in the DOMjquery 想要获取 DOM 中的下一个输入元素
【发布时间】:2023-03-31 03:17:01
【问题描述】:

我正在使用基本上克隆我的表单的表单转发器。表单有一个下拉列表和一个只读输入字段。输入字段值会根据从下拉列表中选择的值进行更新。

由于我没有管理表单中的 ID,因此无法针对特定的选择下拉菜单获取特定的输入标签。 当我单击添加按钮时,它会正确添加,但是如果我为输入字段提供类,它会更改所有输入字段的值,但我只想更改每个表单重复器值的选择旁边的输入字段的值.

现在让我解释一下[这个问题图片][1]附上。

假设我的表单只有如图所示的选择和输入,让我们忽略 cmets 和 amount 字段。 每个SELECT选项都有一个值,只要更改选择值时,我需要在其旁边的输入字段中设置。但问题是我为描述输入字段提供了一个类,它也更改了所有输入字段的输入/占位符值,但我只想更新每个选择旁边的输入标签。

<div class="col-md-2 col-12">
    <div class="mb-1">
        <label class="form-label">Type</label>
        <select class="form-control khataTypeChange" style="color: black" required>
        @foreach ($khataTypes as $khataType)
            <option value="{{ $khataType->id }}">{{ $khataType->name }}</option>
        @endforeach
        </select>
    </div>
</div>

<div class="col-md-3 col-12">
    <div class="mb-1">
       <label class="form-label">Description</label>
       <input type="text" class="form-control description"
       value="{{ $khataTypes[0]->description }}" name="description" required />
       </div>
    </div>    
</div>

查询:

$(".khataTypeChange").change(function (e) {
    e.preventDefault();
    $(".description").val(myArray [$(this).val() - 1]["description"]);
});

P.S : myArray 是我想在每个选定值的输入字段中设置描述的数组

我在尝试什么:

$(".khataTypeChange").change(function (e) {
    e.preventDefault();
    var v = $(this).next("input").val("new value");
    $v.val(myArray[$(this).val() - 1]["description"]);
});

注意:每次按下图像中的添加按钮时,它都会产生全新的重复元素行,因此我只需要更新该特定选择前面的描述 我需要帮助,坚持了 6 个小时 :( [1]:https://i.stack.imgur.com/sbrXq.png

【问题讨论】:

  • 您能在此处更新工作代码以便帮助您吗?
  • 感谢您的回复,我花了几个小时才让它工作,这是正在工作的代码行:$(this).parent().parent().nextAll().find(".description").val(khataTypeData[$(this).val() - 1]["description"]);

标签: html jquery forms


【解决方案1】:

终于可以使用这条线了:

$(this).parent().parent().nextAll().find(".description").val(khataTypeData[$(this).val() - 1]["description"]);

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-12-05
    • 1970-01-01
    • 2011-04-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多