根据AJAX响应动态创建复选框

问题描述

我正在创建一个涉及引导程序的网站，并希望在模式对话框中显示复选框列表(计算机名称)，以供用户选择.我有一个AJAX呼叫和响应，正在返回我想要的信息，但我不知道如何正确显示它.基本上，我收到的返回列表中的每个项目，我都想在模态中显示的列表上附加一个复选框.我以前做过类似的事情，觉得自己已经接近了，但不太了解如何完成这样的事情.如果有人能教我该怎么做，我将不胜感激！我的javascript/html代码位于我的JSP页面的下方.让我知道是否不清楚，或者我需要更多信息.非常感谢！！！

I'm creating a website involving bootstrap and want to display a list of checkboxes (names of computers) in a modal dialog for the user to choose from. I have an AJAX call and response that is returning the information I want but I don't know how to properly display it. Basically, each item that is in the returned list I receive, I want to append a checkbox to the list being displayed in the modal. I've done something similar to this before and feel like I'm close but don't quite understand how something like this can be done. If anyone could teach me how to do this I would greatly appreciate it! My javascript/html code is below from my JSP page. Let me know if this is not clear or more information is needed on my part. Thank you very much!!!

    <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Workstations</h4>
        </div>
        <div class="modal-body">
          <ul id="wkslist"></ul>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">Cancel</a>
          <a href="#" class="btn btn-primary">Done</a>
        </div>
      </div>
    </div>
</div>
    </form>
</div>

这是我用来回复AJAX调用响应的javascript代码.

Here is the javascript code I'm using to the response back from my AJAX call.

    function getWorkstations(e)
{
    var branchName = $('#txtBranch').val();


  if(e.checked)
      {
      $.ajax({
          url : 'ajaxwks.html',
          type: 'POST',
          data: branchName,
          cache:false,
          beforeSend: function(xhr) {


              xhr.setRequestHeader("Content-Type", "text/plain");

          },
          success : function(response)
          {
             alert(response);

             $.each(response, function(key, value){


                 $('#wkslist').append($("<input type='checkbox' name=" + key + "").text(value) + "<br>");
             });
          },

          error:function(jqXhr, textStatus, errorThrown){
              alert(textStatus);
          }
      });

      //ajax call for workstations.
         $('#myModal').modal('show');
      }
}

这是当我使用javascript发出警报时弹出消息框时返回的内容的片段.

This is a snippet of what is returned when I popup the message box when doing an alert in javascript.

["10.117.181.101:NOVELL:001:7637:C",hb:NOVELL:001:7637:C","WD08900960051","WD08900960052","WD08900960056"]

推荐答案

下面是您可以在success函数中用来完成此操作的示例.

Below is an example of what you could use in your success function to accomplish this.

所做的更改包括将每个复选框包装在<li>中，并为其添加相应的<label>.

The changes to what you had include wrapping each checkbox in a <li> and adding a corresponding <label> for it.

// sample of response from server
var response = { optionA: 'One', optionB: 'Two', optionC: 'Three' };

// this would go in your ajax success handler
$.each(response, function (key, value) {
    var li = $('<li><input type="checkbox" name="' + key + '" id="' + key + '"/>' +
               '<label for="' + key + '"></label></li>');
    li.find('label').text(value);
    $('#wkslist').append(li);
});

#wkslist {
    list-style-type: none;
    padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="wkslist"></ul>

这篇关于根据AJAX响应动态创建复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！