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