Question

<!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数据库。

Answer 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

与复选框对话将检查值传递到空选择框

1 个答案: