使用选择框动态创建行使用php

时间:2017-01-17 07:00:41

标签: php jquery mysql

<div class="panel-body">
    <div id="lobrows">
        <div class="form-group">
            <div class="col-sm-4"><label>Reson</label>
                <select class="form-control selectpicker" data-live-search="true" name="reson[]" required="required">
                    <option>--Select--</option>
                    <?php
                    foreach($ob->showDataall("select * from tblname") as $value) { ?>
                        <option value="<?php echo $value['field_id']; ?>"><?php echo $value['field']; ?></option>
                    <?php
                    }
                    ?>
                </select>
            </div>
            <div class="col-sm-4"><label>Service </label>
                <select class="form-control selectpicker" data-live-search="true" name="service[]" id="service" multiple="multiple">
                    <option>--Select--</option>
                    <option value="1">List 1</option>
                    <option value="2">List 2</option>
                    <option value="3">List 3</option>
                    <option value="4">List 4</option>
                </select>
            </div>
            <div class="col-sm-4"><label>Name </label>
                <input type="text" class="form-control" name="name[]" placeholder="Name" />
            </div>
        </div>
    </div>
    <a href="#" class="pull-right" id="add"><i class="fa fa-plus"></i>&nbsp;add</a>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $('#add').click(function(e) {
            e.preventDefault();
            var i=$('.mrbtm').length+1;
            $('#lobrows').append('<div class="mrbtm"><div class="form-group"><div class="col-sm-4"><label>Reson </label><select class="form-control selectpicker" data-live-search="true" name="reson[]"><option>--Select--</option><?php foreach($ob->showDataall("select * from tblname") as $value){?><option value="<?php echo $value['field_id']; ?>"><?php echo $value['field']; ?></option><?php }?></select></div><div class="col-sm-4"><label>Service </label><select class="form-control selectpicker" data-live-search="true" name="service[]" id="service'+i+'" multiple="multiple"><option>--Select--</option><option value="1">List 1</option><option value="2">List 2</option><option value="3">List 3</option><option value="4">List 4</option></select></div><div class="col-sm-4"><label>Name </label><input type="text" class="form-control" name="name[]" placeholder="Name" required="required" /></div></div><a href="#" class="pull-right remove"><i class="fa fa-minus"></i> Remove</a><br /></div>');
            $('.selectpicker').selectpicker();
            $('.selectpicker').selectpicker('refresh');
        });
        $(document).on('click', '.remove', function(e) {
            e.preventDefault();
            $(this).parent('div').remove();
            i--;
        });
    });
</script>

如果我点击每行中创建的添加按钮新行,那里面有一个选择框,我有很多选项,我应该一次选择多个选项,它应该保存在数据库上

这是我的PHP代码

<?php
foreach ($reson as $id => $value) {
    $reson = ($reson[$id]);
    $namep = ($name[$id]);
    $rsid = $ob->insert_data('tbl_reson',array("reson" => $reson, "name" => $namep), true);
    foreach ($service as $ii => $valu) {
        $r_service = ($service[$ii]);
        $ob->insert_data('tbl_service',array("reson_id" => $rsid, "service" => $r_service));
    }
}
?>

如何解决这个问题

我需要将值保存在不同的表中,第一个表是tbl_reson,第二个表是tbl_service,在第一个表中插入了共振和名称,并且在第二个表中插入了服务

1 个答案:

答案 0 :(得分:-1)

要使用Ajax和PHP创建动态选择选项菜单,只需三个步骤: - 制作PHP文件并为选择选项菜单定义标记和脚本 制作CSS文件并为选择选项菜单定义样式 连接到数据库并发送数据

步骤1.制作一个PHP文件,并为选择选项菜单定义标记和脚本 我们创建一个PHP文件并使用名称select.php

保存它

&#13;
&#13;
<html>
<head>
<link rel="stylesheet" type="text/css" href="select_style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function fetch_select(val)
{
 $.ajax({
 type: 'post',
 url: 'fetch_data.php',
 data: {
  get_option:val
 },
 success: function (response) {
  document.getElementById("new_select").innerHTML=response; 
 }
 });
}

</script>

</head>
<body>
<p id="heading">Dynamic Select Option Menu Using Ajax and PHP</p>
<center>
<div id="select_box">
 <select onchange="fetch_select(this.value);">
  <option>Select state</option>
  <?php
  $host = 'localhost';
  $user = 'root';
  $pass = '';
  mysql_connect($host, $user, $pass);
  mysql_select_db('demo');

  $select=mysql_query("select state from places group by state");
  while($row=mysql_fetch_array($select))
  {
   echo "<option>".$row['state']."</option>";
  }
 ?>
 </select>

 <select id="new_select">
 </select>
	  
</div>     
</center>
</body>
</html>
&#13;
&#13;
&#13;

在这一步中,我们从places表中获取状态并在第一个选择菜单中插入,然后我们使用调用fetch_select()的onchange事件;将ajax请求传递给fetch_data.php并获取结果并插入第二个选择菜单中的函数

步骤2.制作CSS文件并为选择选项菜单定义样式 我们创建一个CSS文件并使用名称select_style.css

保存它
body
{
 background-color:#E6E6E6;
 font-family:helvetica;
}
#heading
{
 text-align:center;
 margin-top:150px;
 font-size:30px;
 color:blue;
}
#select_box
{
 width:500px;
 background-color:#819FF7;
 padding:10px;
 height:200px;
 border-radius:5px;
 box-shadow:0px 0px 10px 0px grey;
}
select
{
 width:400px;
 height:50px;
 border:1px solid #BDBDBD;
 margin-top:20px;
 padding:10px;
 font-size:20px;
 color:grey;
 border-radius:5px;
}

步骤3.连接数据库并发送数据 我们创建一个PHP文件保存它,名称为fetch_data.php,用于连接和获取数据,然后在ajax请求上将数据发送到select.php文件。

<?php
if(isset($_POST['get_option']))
{
 $host = 'localhost';
 $user = 'root';
 $pass = '';
 mysql_connect($host, $user, $pass);
 mysql_select_db('demo');

 $state = $_POST['get_option'];
 $find=mysql_query("select city from places where state='$state'");
 while($row=mysql_fetch_array($find))
 {
  echo "<option>".$row['city']."</option>";
 }
 exit;
}
?>