使用 AJAX 向 PHP 传递数据

Question

我在 PHP 中有一个下拉菜单。我有一些来自数据库的字段。现在，除了那个下拉列表之外，我还有一个编辑按钮，我想在下拉列表中传递所选选项的 id！我该怎么做？

<tr>
    <td>Base INI File</td>
    <td>
        <select required  name="base_ini_id"  id="base_ini_id" class="form-control">
            <option value="">Select</option>    
            <?php foreach($base as $value) { ?>
                <option id="emp" class="specialLink" value="<?php echo $value->base_ini_filename;?>"><?php echo $value->base_ini_filename;?></option>
            <?php } ?>
        </select>
    </td>
    <?php foreach($customs as $custom) ?>
        <td>
            <?php echo btn_edit('customer/upload_ini/edit_ini_old/' . $custom->id); ?>
        </td>
        >
</tr>

看起来像这样： 如您所见，除了下拉列表之外，我在td 中有一个按钮，我想使用 AJAX 或 jQuery 将其链接到下拉列表中所选选项的 id。我不了解 AJAX，但由于需要我必须实现它。

Answer 1

试试这个代码。我从您的招聘中调用示例网址。随心所欲地改变

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <td>
    <select required name="base_ini_id" id="base_ini_id" class="form-control"> 
    <option value="">Select</option> 
    <?php foreach($base as $value) { ?> 
    <option id="emp" class="specialLink" value="<?php echo $value->id;?>"><?php echo $value->base_ini_filename;?></option> 
    <?php } ?> 
    </select> 
    </td>
    <td>
        <a id="edit_link" href=""><button>Edit</button> </a>
    </td>
    <script type="text/javascript">
        $(document).ready(function()
        {
        $('#base_ini_id').change(function() {
        var id=$("#base_ini_id").val();
        $("#edit_link").attr("href",  "customer/user/edit/"+id);
        });
        });
    </script>

Answer 2

我建议你不要使用id，因为表中可能有多个记录。因为您的知识 id 是唯一的，但是您可以为此使用 class。

<tr>
    <td>Base INI File</td>
    <td>
        <select required  name="base_ini_id" class="form-control base_ini_id">
            <option value="">Select</option>    
            <?php foreach($base as $value) { ?>
                <option id="emp" class="specialLink" value="<?php echo $value->base_ini_filename;?>"><?php echo $value->base_ini_filename;?></option>
            <?php } ?>
        </select>
    </td>
    <td>
        <span onclick="btn_edit(this);">Edit</span>
    </td>
 </tr>

使用以下 JavaScript 函数获取所选选项

<script type="text/javascript">
 function btn_edit(control)
 {
   var selected_option = $(control).parent().prev().find('.base_ini_id').val();
   // Use selected option variable to pass data in your php file
  $.ajax({
       type: "post",
       url: "customer/upload_ini/edit_ini_old/"+selected_option ,
       cache: false,               
       success: function(change)
       {                      
          // Do here what you want...
       }
  });

 }
</script>

这里的 parent() 函数返回 $(control) 元素的父元素。

prev() 函数返回特定元素的前一个元素。

find() 函数从指定元素中查找类、id 或元素。

您可以在 selected_option 变量中获取选定的选项值

希望你得到我！

更新

使用以下代码

<tr>
        <td>Base INI File</td>
        <td>
            <select required onchange="option_change(this);"  name="base_ini_id" class="form-control base_ini_id">
                <option value="">Select</option>    
                <?php foreach($base as $value) { ?>
                    <option id="emp" class="specialLink" value="<?php echo $value->base_ini_filename;?>"><?php echo $value->base_ini_filename;?></option>
                <?php } ?>
            </select>
        </td>
        <td>
            <a href = "" class="edit_link">Edit</span>
        </td>
     </tr>

<script type="text/javascript">
function option_change(select)
{
  var selected_val = $(select).val();
  var link = "customer/upload_ini/edit_ini_old/"+selected_option;
  $(select).parent().next().find('.edit_link').attr('href', link);
}
</script>

这将在选项更改后更新编辑锚的 href 属性。如果您单击编辑而不选择选项页面将刷新只有您可以在那里管理您想要的东西..