如何在 MySql 数据库中存储项目列表？答案

【问题标题】：How to store list of items in MySql database?如何在 MySql 数据库中存储项目列表？
【发布时间】：2021-07-11 03:53:07
【问题描述】：

我已经在 HTML 中创建了一个城市下拉列表，并且我想从该列表中显示在 div 中。

我在选择标签上应用了 onchange 事件并在 javaScript 中编写了追加函数。因此，当任何用户选择城市时，应在 div 中添加或附加城市名称。

我使用 Ajax 并获取城市列表作为响应。所有这些事情都完成了。

但我面临一个问题，我需要将所有这些城市名称存储在我的数据库中。 [![附上的图片是显示我的下拉列表数据[![另一张图片是显示从下拉列表中选择任何城市名称时数据的样子][1]][1]][2]

  [1]: https://i.stack.imgur.com/3mlEq.png
  [2]: https://i.stack.imgur.com/vVEXm.png
How should we implement this thing in JavaScript? 

Any suggestion would be appreciated.
JavaScript function to get list of cities selected from list.
function setdeliverycity(){
        var userid = document.getElementById('vendordeliveryid').value;
        var delivercityid = document.getElementById('vendorcitydd').value;
        var url = "../api/setdeliverycity";
        $.post(url,{
            userid : userid,
            delivercityid : delivercityid,
        }, function(data, status) {
            if (data.status == "OK") {
                if (data.statusCode == 1) {
                    var citydiv = "";   
                    var citylist = data.response.city;
                    var cityid = data.response.delivercityid;
                    var citylistlength = citylist.length;
                    if(citylistlength > 0) {
                        citydiv = citydiv+"<div>"+citylist+" &nbsp;<i class=\"fa fa-times\" onclick=\"removecity('"+cityid+"', '"+citylist+"')\"></i></div>";
                    }else{
                        citydiv = citydiv+"<div style=\"text-align: center; float: left; margin-left: 40%; font-size: medium; font-weight: bolder; background: blanchedalmond;\"><span>Choose city from list</span></div>";
                    }
                    $('#citydivid').append(citydiv);
                } else {
                    var error = data.responseMessage;
                    swal(error, "", "error");
                }
            } else {
                var error = data.responseMessage;
                swal(error, "", "error");
            }
        });
    }

【问题讨论】：

将这些保存在本地 javascript 数组变量或隐藏输入类型中，并在您将其附加到 div 的同时保存。即 OnClick 函数本身。然后在提交表单时将其发送到帖子正文中
你能举一些例子吗？
我要给你看我的剧本吗？
如果你能在这里添加一些代码就很容易了
我想，我不能在评论区给你看整个剧本。

标签： javascript jquery ajax spring-boot jsp

【解决方案1】：

示例已添加，您可以理解如下。

let selectedValues = [];

$(document).ready(()=>{
  $("#selectBox").change((item)=>{
    selectedValues.push($("#selectBox").val());
    $("#selectedVal").append("<div>"+$("#selectBox").val()+"</div>");
  })
  
  $("submitBtn").click(()=>{
    $.ajax({
      type: "POST",
      url: url,
      data: selectedValues,
      success: success,
      dataType: dataType
    });
  
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectBox">
<option value="abc">ABC</option>
<option value="xyz">XYZ</option>
<option value="pqr">PQR</option>
<option value="ghi">GHI</option>
</select>


<div id="selectedVal">

</div>

<button type="button" id="submitBtn">Submit</button>

【讨论】：

好的。我会试试这个方法。