网站加载后填写表格与jQuery

我生成信息一堆<div>这样的：网站加载后填写表格与jQuery

@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");

是这里的问题，但我不知道如何解决它。有什么建议么。

来源

2017-04-26 prgrm

尝试'变种drowndown_value = $（本）。儿童（“：选择”）。VAL（） ;' – T30

加载时实际上并没有选择任何东西，所以你从来没有找到任何有选择的孩子。你需要设置默认选择 – ScanQR

只是FYI你应该使用'val（）'而不是'attr（'value'）' –

的问题是在这里：

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

来源

2017-04-26 09:07:38 Flater

我解决了这个改变：

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

到：

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

感谢您的意见。

来源

2017-04-26 08:46:14 prgrm

网站加载后填写表格与jQuery

回答

相关问题