2013-02-17 129 views
0

所以我学会了如何动态地向数组添加元素 - 如何去除它们?从阵列中动态移除元素

jQuery的

$(document).on('change blur', '.roomFac', function() { 
     var park = $("#park2").val(); 
     var lecturestyle = $("#lecture_style2").val(); 
     var roomstructure = $("#room_structure2").val(); 
     var groupsize = $("#groupSize2").val(); 
     var facilities = ""; 
     $('select[name*=roomFac]').each(function() { 
      facilities += $(this).val(); 
      facilities += ","; 
     }); 
     var dataString = 'park=' + park + '&' + 'lecturestyle=' + lecturestyle + '&' + 
      'roomstructure=' + roomstructure + '&' + 'groupsize=' + groupsize + '&' + 
      'facilities=' + facilities; 
     $.ajax({ 
      type: "POST", 
      url: "process_timetableMon2.php", 
      data: dataString, 
      cache: false, 
      success: function (html) { 
       $('#mon').html(html); 
      } 
     }); 
    }); 

process_timetableMon2.php

$array = explode(",", $_POST["facilities"]); 

for($i = 0; $i < count($array)-2; $i++){ 
    echo $array[$i].'<br>'; 
} 

我已上载这里的一些代码:http://jsfiddle.net/kfm5b/3/

+0

我觉得你很容易让数组与DOM元素混淆..实际上我很困惑自己。你究竟想要做什么? – kjetilh 2013-02-17 15:23:17

+0

@kjetilh当用户点击Add按钮时,我在process_timetableMon2.php中为服务器端处理创建一个数组。我想在用户点击process_timetableMon2.php中的Remove按钮时删除数组 - 我知道迄今为止,这涉及到更新变量** facilities **。 – 2013-02-17 15:24:36

+0

Aha,所以你的意思是使用Ajax更新数组:)我建议你只使用一个下拉菜单(或'select'标签)并设置属性'multiple =“multiple”'以便可以选择多个项目。 – kjetilh 2013-02-17 15:39:21

回答

0

而是动态地创造更多的下拉菜单中,我建议你,而保持简单并坚持一个下拉菜单与multiple="multiple"属性。

<select class="roomFac" name="roomFac" id="roomFac" multiple="multiple"> 
    <option selected="selected" value="">Any</option> 
    <option value="opt1">Opt 1</option> 
    <option value="opt2">Opt 2</option> 
</select> 

在JavaScript中,您不再需要遍历所有下拉菜单及其选定的项目值。为了简单起见,我保留了大部分结构,但我建议您将值存储在对象中,而不是手动构建数据字符串。这更加优雅,并且更容易传递数组,就像一个字符串一样,您必须使用多个字符串array[]=...

$(document).on('change blur', '.roomFac', function() { 
    var park = $("#park2").val(); 
    var lecturestyle = $("#lecture_style2").val(); 
    var roomstructure = $("#room_structure2").val(); 
    var groupsize = $("#groupSize2").val(); 
    var facilities = $('#roomFac').val().join(','); 
    var dataString = 'park=' + park + '&' + 'lecturestyle=' + lecturestyle + '&' + 
     'roomstructure=' + roomstructure + '&' + 'groupsize=' + groupsize + '&' + 
     'facilities=' + facilities; 
    $.ajax({ 
     type: "POST", 
     url: "process_timetableMon2.php", 
     data: dataString, 
     cache: false, 
     success: function (html) { 
      $('#mon').html(html); 
     } 
    }); 
});