Jquery - Изменение Значение опции После выбора

Question

Как отображать разные <option>текст и значение из выбранного checkbox с помощью JQuery Ajax. В моей форме у меня есть два флажка для выбора диапазона цен. Пример, как показано ниже,

<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> 

Аякс peform Изменение

$("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">. Мне нужно сделать еще одну функцию ajax для <select name="hod" id="hod"> и сделать другую страницу, чтобы получить значение из базы данных, например DropdownValuesForm.php.

Answer 1

Чтобы сделать то, что вы пытаетесь сделать, вам просто нужно придерживаться одной страницы ajax, которая будет отправлять инструкции. См. Мой ответ (вторая половина под EDIT/JUST AS SIDE) 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):''; 
    } 

/действия/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