与复选框对话，将检查值传递给空选择框答案

【问题标题】：dialogue with checkbox the passingin check values to empty select box与复选框对话，将检查值传递给空选择框
【发布时间】：2018-06-19 17:08:53
【问题描述】：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
</head>
<body>
    <script type="text/javascript">
        $(document).ready(function() {
            var $dialog = $('<div></div>')
                .html('<form id="myform" action=""><input type="checkbox"   id="completeCheck" name="completeCheck" value="truck" />Complete check<br /><input type="checkbox" name="view" value="Car" /> View report <br /><input type="checkbox" name="consist" value="van" />Consistency check<br /><input type="checkbox" name="other" value="bike" />Other checks<br /><input type="checkbox" name="keyCheck" value="scooter" />Key check<br /><input type="checkbox" name="compareCheck" value="skate" />Compare check<br /></form>')
                .dialog({
                    autoOpen: false,
                    title: 'Data check',
                    buttons: {
                        "Submit Form": function() {
                            $('form#myform').submit();
                        },
                        "Cancel": function() {
                            $(this).dialog("close");
                        }
                    }
                });

            $('#createNew').click(function() {
                $dialog.dialog('open');
                // prevent the default action, e.g., following a link
                return false;
            });

            $('form#myform').submit(function() {
                $(this).find(':checkbox').each(function() {
                    if (this.checked) {
                        //alert(this.value + ' is checked');

                        var sel = $('<select>').appendTo('body');
                        sel.append($("<option>").attr('value', this.value).text(this.name));

                    } else
                        alert(this.name + ' is not checked');
                });
                $dialog.dialog('close');
            });


        });
    </script>
    <a id="createNew" href="#">open</a>
</body>
</html>

在该弹出框中有一个弹出框，当您选择这些复选框时，您将拥有复选框，它们会使用您在弹出框中选择的项目填充一个空的选择框。然后，当您逐一选择这些项目时，会为每个选定的项目显示一个输入框。然后，您必须将选择框中填充的那些项目连同相应的输入字段一起传递给数据库。

我在从复选框对话框中获取值以填充到选择框时遇到问题。它正在通过 url 并重新加载页面。还想将选择框中的所有值传递给 mysql 数据库。

【问题讨论】：

那么这里的问题到底是什么？你被困在哪里了？（一个特定的点？）
我已经更新了帖子。
您需要将每个复选框作为单独的选择框吗？
@Supun Praneeth 不，他们应该进入一个选择框
嗨@TripplexPC-Tech。我不知道你想要达到什么目的。如果要将对话框中的选定值发送到数据库，则无需创建单独的下拉列表。如果你想要下拉菜单。请在此处查看代码JSBin。这里的问题是它不会向php 文件发送值，因为select 没有name attr。

标签： javascript php jquery html mysqli

【解决方案1】：

试试这个：

<html>

<head>
  <title></title>

  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
</head>

<body>

  <script type="text/javascript">
    $(document).ready(function() {
      var $dialog = $('<div></div>')
        .html('<form id="myform" action=""><input type="checkbox"   id="completeCheck" name="completeCheck" value="truck" />Complete check<br /><input type="checkbox" name="view" value="Car" /> View report <br /><input type="checkbox" name="consist" value="van" />Consistency check<br /><input type="checkbox" name="other" value="bike" />Other checks<br /><input type="checkbox" name="keyCheck" value="scooter" />Key check<br /><input type="checkbox" name="compareCheck" value="skate" />Compare check<br /></form>')
        .dialog({
          autoOpen: false,
          title: 'Data check',
          buttons: {
            "Submit Form": function() {
              $('form#myform').submit();
            },
            "Cancel": function() {
              $(this).dialog("close");
            }
          }
        });
      $('#createNew').click(function() {
        $dialog.dialog('open');
        // prevent the default action, e.g., following a link
        return false;
      });
      $('form#myform').submit(function(e) {
        var sel = $('<select>').appendTo('body');
        $(this).find(':checkbox').each(function() {
          if (this.checked) {            
            sel.append($("<option>").attr('value', this.value).text(this.name));
          } else {
            alert(this.name + ' is not checked');
          }
        });
        $.ajax({
          type: 'POST',
          url: 'url',
          data: $(this).serialize()
        });
        $dialog.dialog('close');
        e.preventDefault();
      });
    });
  </script>

  <a id="createNew" href="#">open</a>

</body>

</html>

codepen

【讨论】：

现在我只需要找出如何根据选择来匹配相应的输入框
对不起，我不明白
@ Supun Praneeth 我现在需要根据下拉框中的选择生成输入字段，以便我可以通过相应选项从选择框中传递所有值。因此，如果我从选择框中选择 completeCheck，则应出现一个输入字段，然后我在输入字段中输入与其相关的每个值，然后当我从下拉列表中选择视图时，将出现一个输入框，依此类推。然后我会将选择框中的所有项目连同相应的输入字段一起传递给数据库。
有一个问题，当我点击打开时它会显示我检查过的项目，但是如果我检查一个新项目并再次提交它会重复以前的项目。
我正在努力完成我提到的事情，但遇到了问题。例如：在选择框中我有：卡车，汽车，自行车。如果我回去检查我得到的其他一些复选框：卡车，汽车，自行车，卡车，汽车，自行车，踏板车。如您所见，选择框中的选项有重复项。我不想要这个。如果我回去检查复选框，代码现在如何创建新的选择框。也不想那样。