使用Javascript动态设置“选定”属性

时间:2018-10-26 17:58:38

标签: javascript jquery

这是我的代码:

$.ajax({   
    type: "POST",
    url: "localhost/api.php",
    data: {id:user_id},
    cache: false,
    success: function(data) {

        var obj = $.parseJSON(data); 
        if (obj.msg == "1")
        {
            $.each(obj.userList, function(i,value) {
                var jArray = <?php echo json_encode($groupData ); ?>;
                list = [];
                for (var i = 0; i < jArray.length; i++) {
                    list.push('<option id=' + jArray[i].Group_Id + ' value=' + jArray[i].Group_Name + '>' + jArray[i].Group_Name + '</option>');
                }
                var html ="<tr>"+
                        "<td>"+value['id']+"</td>"+
                        "<td>"+value['groupID']+"</td>"+ 
                        "<td><select name='Group[]''>"+list+ "</select></td>";
                $('table#List tbody').append(html);

            });
        }
    },
    alert('Error');
});

我正在基于ajax响应动态构建html。 在代码段中>

 var jArray = <?php echo json_encode($groupData ); ?>;
 list = [];
 for (var i = 0; i < jArray.length; i++) {
      list.push('<option id=' + jArray[i].Group_Id + ' value=' + jArray[i].Group_Name + '>' + jArray[i].Group_Name + '</option>');
 }

$groupData是一个PHP数组。因此,我将其转换为Javascript数组,并使用此jArray生成“选项”并推送结果列表数组。我将这个list数组附加到html中,这一切工作得很好。现在有6个组,其中一个已经为数据库中的特定用户设置了。因此,当前“选项”都没有选择属性。我在比较jArray[i].Group_Idvalue['groupID']时遇到麻烦。我想要实现的是我想将jArray[i].Group_Idvalue['groupID']进行比较,如果它们相等,则为该特定对象设置一个选定的属性。如何在“选项”内编写if语句以进行比较?

1 个答案:

答案 0 :(得分:5)

以下是显示此工作方式的示例代码:

const jArray = [{Group_Id: 1, Group_Name: 'One'}, {Group_Id: 2, Group_Name: 'Two'}];
const userList = [{id: 'user1', groupID: 2}, {id: 'user2', groupID: 2}, {id: 'user3', groupID: 1}];
$.each(userList, function(x,value) {
  list = [];
  for (var i = 0; i < jArray.length; i++) {
    list.push('<option id=' + jArray[i].Group_Id + ' value=' + jArray[i].Group_Name + (jArray[i].Group_Id == value.groupID ? ' selected ' : '') + '>' + jArray[i].Group_Name + '</option>');
  }
  var html ="<tr>"+
      "<td>"+value.id+"</td>"+
      "<td>"+value.groupID+"</td>"+ 
      "<td><select name='Group[]''>"+list+ "</select></td>";
  $('table#List tbody').append(html);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="List">
  <tbody></tbody>
</table>

代码中缺少的重要内容是:

(jArray[i].Group_Id == value.groupID ? ' selected ' : '')