1

我在 DOM 准备好时让一些 jQuery 运行时遇到问题。

我有两个表单，每个表单<select>在我的代码运行时都应该加载到其他表单元素中。

当用户第一次加载页面时，我希望这些选择ready()能够获取某些属性（表单操作、load()目标等），然后将其加载。使用时工作得很好change()，我可以让一个<select>工作但不能同时工作。

HTML

<form action="php/bagCreate/newBag_bag.php" method="post" id="form1">
  <select id="target" data-target="upForm" class="get" name="bagLevel">
    <option>1</option>   
    <option>2</option>  
    <option>3</option>   
  </select>        
</form>

<form action="php/bagCreate/storeItems_bag.php" method="post" id="form2">      
  <select id="target2" data-target="upFormType" class="get" name="itemName">
    <option>A</option>   
    <option>B</option>  
    <option>C</option>   
  </select>        
</form>

JS

这适用于单个表单，但第二个不会加载

$(document).ready(function(){
$('select.get').ready(function() {
    var action = $('select.get').parent().attr('action');
    var target = $('select.get').data('target');
    $('#'+target).load(action, $('select.get').parent().serializeArray());     
});

更改select.get为thisready 函数内部不会导致加载任何表单。

两种形式的使用change()都非常好，尽管它有点重复

$('select.get').change(function() {        
  var action = $(this).parent().attr('action');  
  var target = $(this).data('target');  
  $('#'+target).load(action, $(this).parent().serializeArray());      
});
4

4 回答 4

4

只需在 pageload 上触发 change 事件？

$('select.get').change(function() {        
  var action = $(this).parent().attr('action');  
  var target = $(this).data('target');  
  $('#'+target).load(action, $(this).parent().serializeArray());      
}).change(); //trigger it on pageload as well ...
于 2013-02-11T20:56:10.187 回答
2

使用该each()方法将代码应用于 jQuery 对象中的多个select元素。此外，正如评论所暗示的，该ready()方法应保留给document对象。

例如：

$(document).ready(function() {
    $('select.get').each(function(i) {
        var action = $(this).parent().attr('action');
        var target = $(this).data('target');
        $('#'+target).load(action, $(this).parent().serializeArray());
    });
});

请注意，在each() 回调函数的每次迭代中，如何$(this)引用对象中的第i个元素$('select.get')。

于 2013-02-11T20:58:39.380 回答
1

如果您的第一个代码片段如下所示：

$(document).ready(function(){
    $('select.get').each(function() {
        var action = $('select.get').parent().attr('action');
        var target = $('select.get').data('target');
        $('#'+target).load(action, $('select.get').parent().serializeArray());     
    }
);

将 ready 方法更改为 each 方法将为使用选择器找到的每个元素运行一次定义的函数。

于 2013-02-11T21:01:21.123 回答
0 
$(document).ready(function(){
    $('select.get').each(function(){
        var $t = $(this);
        var $p = $t.parent();
        var action = $p.attr('action');
        var target = $t.data('target');
        $('#'+target).load(action, $p.serializeArray());
    });
});
于 2013-02-11T21:00:49.763 回答