如何从选定的(复选框)listview和uplaod获取值到服务器jquery mobile

时间:2017-08-18 10:00:54

标签: javascript ajax jquery-mobile hybrid-mobile-app jquery-mobile-listview

enter image description here

我只想在服务器上的listview中上传特定的选定值(已选中)。 列表中有任何值与复选框,所以我想选择其中的一些,并希望上传到服务器。 //下面的代码用于在listview上设置chekcbox

var ajax = {  
        parseJSON:function(result){  
            movieInfo.result = result.entries;
            $.each(result.entries, function(i, row) {
                //console.log(JSON.stringify(row));

                $('#movie-list').append('<li>'+'<h3>' +'Store Name  : '+ row.STORE_NAME + '</h3><p9>' +'Store Id : '+ row.STORE_ID + '</p9> <p2><br>Store Visit Date : '+ row.STORE_VISIT_DATE + '</p2><p2><br>Comment: '+ row.COMMENTS + '</p2><p>' +'Store Issue : '+ row.ISSUE + '</p><p>'+'User : '+ row.USER_NAME + '</li>');
            });

            $('#movie-list').listview('refresh');
        }
    }

///以下用于将数据上传到服务器的脚本 //所以我只想从ui和uplaod获得选定的价值

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var S_NO = $("#crm_serialnumber").val();

        var USER_NAME = localStorage.getItem("PMUsername");

        $.ajax({
            type: "POST",

            url: "https://c.jsp",

           /* url: "https://d="+filename + "&store_name=" + filename2+ "&ph_no="+filename3,*/
            data: {

                "S_NO" : S_NO,

                "USER_NAME" : USER_NAME
            },
            /*
            data: "store_id ="+ filename + "&store_name =" +filename2 + "&ph_no =" + filename3 ,
            */
            success: function (msg,String,jqXHR) {
                window.location='home.html';

                $("#result").html(msg,String,jqXHR)
               alert("Data Uploaded: ");
            }
        });
    });
});

//在我学习的时候,请帮助我解决这个问题。 感谢

1 个答案:

答案 0 :(得分:0)

首先,当您填充列表时,我相信您应该为列表项分配一个标识符,以便稍后在需要发布选择时获取它。

为此,您只需为每个列表项设置自己的自定义数据属性,就像为段落和标题指定文本和标题一样。

之后,您可以过滤选中的复选框并检索属于以下内容的列表项:

&#13;
&#13;
function getChecked() {
  $("#movie-list :checkbox:checked").each(function(index) {
    // retrieve the list item
    var listItem = $(this).closest("li");
    // get the data associated
    var identifier = listItem.data("identifier");
    var storeName = listItem.data("store-name");
    console.log(index, identifier, storeName);
  });
}
&#13;
#movie-list > li{
  padding: 0 !important;
}

#movie-list .ui-checkbox {
  margin: 0 !important;
}

#movie-list .ui-checkbox .ui-btn {
  border-width: 0 !important;
  border-radius: inherit !important;
}
&#13;
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div id="page-list" data-role="page">
    <div role="main" class="ui-content">
      <button class="ui-btn ui-mini" onclick="getChecked()">Get checked items</button>
      <br>
      <ul id="movie-list" data-role="listview">
        <li data-identifier="1" data-store-name="store-1">
          <input type="checkbox" name="checkbox-1" id="checkbox-1" />
          <label for="checkbox-1">
            <h2>Stephen Weber</h2>
            <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
            <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
          </label>
        </li>
        <li data-identifier="2" data-store-name="store-2">
          <input type="checkbox" name="checkbox-2" id="checkbox-2" />
          <label for="checkbox-2">
            <h2>jQuery Team</h2>
            <p><strong>Boston Conference Planning</strong></p>
            <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
          </label>
        </li>
        <li data-identifier="3" data-store-name="store-3">
          <input type="checkbox" name="checkbox-3" id="checkbox-3" />
          <label for="checkbox-3">
            <h2>Avery Walker</h2>
            <p><strong>Re: Dinner Tonight</strong></p>
            <p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait!</p>
          </label>
        </li>
      </ul>

    </div>
  </div>
</body>
</html>
&#13;
&#13;
&#13;