jQuery的 - 更改选项值选择

Question

后如何从选择checkbox使用jQuery的Ajax显示不同<option>文本和值。在我的表格中，我有两个复选框供用户选择价格范围。例如如下，

<input type="checkbox" name="price_range" value="1" id="ceo"> < RM 10,000 
<input type="checkbox" name="price_range" value="2" id="bod"> < RM 200,000 

如果用户选择value='1'或value='2'，两个选择选项值的输出将所选择的复选框改变碱。

//display application name 
<select name="submited_by" id="submited_by"> 
    <option value="0">Choose Price Range</option> 
</select> 

//display name to approve application 
<select name="hod" id="hod"> 
    <option value="0">Choose Price Range</option> 
</select> 

阿贾克斯的[执行变更

$("input[name='price_range']").click(function() { 
    var price = $(this).val(); 

    $.ajax({ 
     type: 'POST', 
     url: 'DropdownValuesForm.php', 
     data: { price : price }, 
     success: function(data){ 
      $('#submited_by').html(data) 
     } 
    }); 

}); 

DropdownValuesForm.php

<?php 
require 'db_connection.php'; 

if ($_SERVER["REQUEST_METHOD"] == "POST") { 
    $price = $_POST['price']; 
} 

if($price == '< RM 10,000'){ 
    //do the Query 

    if(mysqli_num_rows($result) > 0){ 
     while($row = mysqli_fetch_assoc($result)){ 
      $submited_by = $row['staff_id'];  
      $nama = $row['nama']; 

      echo '<option value=" ' . $submited_by . ' ">' . $nama . '</option>'; 
     } 
    } 
    mysqli_free_result($result); 

} else { 
    //do the Query 

    if(mysqli_num_rows($result) > 0){ 
     while($row=mysqli_fetch_assoc($result)){ 
      $submited_id = $row['staff_id']; 
      $nama_pemohon = $row['nama']; 

      echo '<option value=" ' . $submited_id . ' ">' . $nama_pemohon . '</option>'; 
     } 
    } 
    mysqli_free_result($result); 
} 
?> 

在我的情况下，将只<select name="submited_by">改变。我是否需要为<select name="hod" id="hod">创建另一个Ajax函数，并创建另一个页面以获取数据库中的值，如​​。

Answer 1

要做你正在做的事情，你真的只需要坚持一个ajax页面，将派遣指示。看到我的回答（下半部分编辑编辑）here看看如何实现一个简单的调度器。使用从该职位调度员，这里是这个工作流程是什么样子：

表复选框：

<!-- Unless you need the form to submit a 1 or 2, it would be better to send 10,000 or 20,000 instead of 1 or 2 --> 
<input type="checkbox" name="price_range" value="1" id="ceo" data-instructions='{"action":"get_price_range","value":"< RM 10,000","sendto":"#submited_by"}' class="ajax_trigger" /> 
<input type="checkbox" name="price_range" value="2" id="bod" data-instructions='{"action":"get_price_range","value":"< RM 20,000","sendto":"#hod"}' class="ajax_trigger" /> 

的jQuery：

$(document).ready(function() { 
    var doc = $(this); 
    // Create ajax instance (from other post, see that script) 
    var Ajax = new AjaxEngine($); 
    // If you trigger on a class, you can do ajax anywhere on your page 
    doc.on('click', '.ajax_trigger', function() { 
     // You will likely want to check first that the click is enabling 
     // the checkbox or disabling it (check/uncheck) before you run the ajax 
     // Extract the instructions 
     var dataInstr = $(this).data('instructions'); 
     // Send the instructions 
     Ajax.send(dataInstr,function(response) { 
      // Use the extracted sendto to save to a spot on this page 
      // It would be better to return json string to decode. This way 
      // you can return instructions along with the html for further 
      // dynamic processing...but this instance, this should do 
      $(dataInstr.sendto).html(response); 
     }); 
    }); 
}); 

$ _ POST：

您的帖子然后会发送：

Array(
    [action] => get_price_range 
    [value] => < RM 10,000 
    [sendto] => #submited_by 
) 

XML：

使用其他职位为指导，你可以创建一个XML到您的调度指向现货：然后

<?xml version="1.0" encoding="UTF-8"?> 
<config> 
    <ajax> 
     <action> 
      <get_price_range> 
       <include>/actions/get_price_range.php</include> 
      </get_price_range> 
     </action> 
    </ajax> 
</config> 

您的调度将包括此页面拨入电话：

/actions/get_price_range.php 

/functions/getPriceOptions.php

将关键脚本放入函数（用于更灵活的类/方法）以实现可移植性和重用。

<?php 
/* 
** @description This will return your options 
** @param $key [string] This is whatever you used to isolate the data in your sql call 
** @param $db [resource] This is the mysqli connection that you need to run the query 
*/ 
function getPriceOptions($key,$db) 
    { 
     ################## 
     ## do the query ## 
     ################## 

     if(mysqli_num_rows($result) > 0){ 
      while($row = mysqli_fetch_assoc($result)){ 
       $submited_by = $row['staff_id'];  
       $nama  = $row['nama']; 
       # You may want to just return data and not a view 
       # the function will be more flexible that way 
       $disp[]  = '<option value=" ' . $submited_by . ' ">' . $nama . '</option>'; 
      } 
     } 
     mysqli_free_result($result); 
     return (!empty($disp))? implode(PHP_EOL,$disp):''; 
    } 

/actions/get_price_range。PHP

<?php 
require_once(__DIR__.'/db_connection.php'); 
# include the function 
require_once(__DIR__.'/functions/getPriceOptions.php'); 
# Isolate the post 
$price = $_POST['price']; 
# Get the query key word/value to search your database 
$key = ($price == '< RM 10,000')? 'whatever' : 'otherwhatever'; 
# Write to the view 
echo getPriceOptions($key,$db); 

DEMO：

这里是链接的帖子和上述所有的集成脚本演示。这个例子是有点不同，因为我没有你的表，我想发回后阵列，所以你可以看到为好，但最终的结果是一样的：

http://www.nubersoft.com/tester.php?example=39736539