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)将是文档本身。

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

如果我是你，我会用

更改两个个例

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

你这样做的方式并不是特别错误，但我更喜欢上述选择，因为它更简洁，（IIRC）稍微快一点。

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

修改

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

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

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

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

Answer 2

我通过改变来解决这个问题：

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

为：

var drowndown_value = $("#variabledropdown option:first").val();

感谢您的评论。

在站点加载后使用Jquery填充表单

2 个答案: