javascript - 在站点加载后使用 Jquery 填写表单

Question

我生成了一堆 <div>有这样的信息:

@foreach($variables as $variable)
    <div id="x1_{{$variable->id}}" value="{{$variable->x1}}"></div>
    <div id="x2_{{$variable->id}}" value="{{$variable->x2}}"></div>
    <div id="y1_{{$variable->id}}" value="{{$variable->y1}}"></div>
    <div id="y2_{{$variable->id}}" value="{{$variable->y2}}"></div>
    <div id="page_{{$variable->id}}" value="{{$variable->page}}"></div>
    <div id="direction_{{$variable->id}}" value="{{$variable->direction}}"></div>
    <div id="variable_{{$variable->id}}" value="{{$variable->variable}}"></div>
@endforeach

然后我想在网站加载时以及下拉列表更改时填写表单。下拉更改有效，但加载时的填充无效。这是javascript:

这行不通:

$(document).ready(function() {
    var drowndown_value = $(this).children(":selected").attr("value");
    var x1 = $("#x1_" + drowndown_value).attr("value");
    var x2 = $("#x2_" + drowndown_value).attr("value");
    var y1 = $("#y1_" + drowndown_value).attr("value");
    var y2 = $("#y2_" + drowndown_value).attr("value");
    var variable = $("#variable_" + drowndown_value).attr("value");
    var regex = $("#regex_" + drowndown_value).attr("value");
    var direction = $("#direction_" + drowndown_value).attr("value");
    var page = $("#page_" + drowndown_value).attr("value");

    $("#x1").val(x1);
    $("#y1").val(y1);
    $("#y2").val(y2);
    $("#x2").val(x2);
    $("#page").val(page);
    $("#direction").val(direction);
    $("#regex").val(regex);
    $("#variable").val(variable);
});

这个有效:

$("#variabledropdown").change(function() {
    var drowndown_value = $(this).children(":selected").attr("value");
    var x1 = $("#x1_" + drowndown_value).attr("value");
    var x2 = $("#x2_" + drowndown_value).attr("value");
    var y1 = $("#y1_" + drowndown_value).attr("value");
    var y2 = $("#y2_" + drowndown_value).attr("value");
    var variable = $("#variable_" + drowndown_value).attr("value");
    var regex = $("#regex_" + drowndown_value).attr("value");
    var direction = $("#direction_" + drowndown_value).attr("value");
    var page = $("#page_" + drowndown_value).attr("value");

    $("#x1").val(x1);
    $("#y1").val(y1);
    $("#y2").val(y2);
    $("#x2").val(x2);
    $("#page").val(page);
    $("#direction").val(direction);
    $("#regex").val(regex);
    $("#variable").val(variable);
});

我大胆猜测并认为:

var drowndown_value = $(this).children(":selected").attr("value");

是这里的问题，但我不确定如何解决它。任何建议。

Answer 1

问题出在这里:

var drowndown_value = $(this).children(":selected").attr("value");

当您在下拉列表的更改事件中执行此操作时，$(this) 将成为下拉列表。

当您在 $(document).ready() 函数中执行此操作时，$(this) 将是 document 本身.

您的代码在第二种情况下不起作用，因为该文档没有您期望找到的子项。

如果我是你，我会更改两个实例:

var selectedValue = $("#variabledropdown").val()

您的做法并没有特别错误，但我更喜欢上面的替代方法，因为它更简洁并且 (IIRC) 速度稍快。

我还提倡将这两个函数抽象为一个函数(因为它们是彼此的精确复制/粘贴)；但这可能超出了您的问题范围。

---

编辑

根据 this SO question ，您无需在下拉列表中查找选项 children。只要下拉列表是单项选择(即您不能选择多个选项)，.val() 就会自动查找所选选项。

var selectedValue = $('#variabledropdown').val();

请注意，这仅适用于检索值，不适用于文本。如果您想要所选选项的文本，那么您实际上需要使用以下方法查找所选选项:

var selectedText = $('#variabledropdown :selected').text();