Обновление содержимого раскрывающегося списка Javascript/PHP

Question

Я новичок в Javascript/Jquery и борюсь с определенной проблемой.

В процессе добавления задания в базу данных пользователи имеют возможность обновлять содержимое выпадающих списков новыми параметрами. Добавление новых параметров осуществляется через greybox, который отправляет данные с PHP через базу данных.

После добавления новой опции она не отображается в выпадающем списке. Поэтому они должны иметь возможность щелкнуть кнопку, чтобы обновить содержимое выпадающего списка. Кто-нибудь сделал это раньше, и может показать мне пример исходного кода? Или есть более элегантное решение этой проблемы?

Я занимаюсь поиском практически без остановок и не могу найти решение, любая помощь приветствуется. N, N

Edit:

<script type="text/javascript"> 
function getbrands(){ 
    new Ajax.Request('ajax/brand.php',{ 
     method: 'get', 
     onSuccess: function(transport){ 
      var response = transport.responseText; 
      $("brand").update(response); 
     } 
    }); 
} 

Он работает ... иногда. Очень неустойчиво. Также имеет плохую привычку противоречить другим скриптам на странице. (главным образом greybox)

Любые предложения будут приняты на борту на этом этапе. : X

Answer 1

Предполагая, что вы используете JQuery, вы можете сделать следующее ..

//in a php file that your gonna use to fetch new dropdown values 
<?php //pathToPhpFile.php 
    header("Content-Type: application/json"); 

    //here you'd perform a database query 
    //heres a dummy dataset 
    $data = array( 
     array("id" => "dropdown1", "label" => "Dropdown #1"), 
     array("id" => "dropdown2", "label" => "Dropdown #2"), 
    ); 

    echo json_encode($data); 
    exit; 
?> 

Javascript код: sould быть завернуты в $ (документ) .ready (функция() {}); блок для обеспечения кнопки готов принять события

//attach refresh event to button 
$("#refeshButtonId").click(function() { 

    var dropdown = $('#idOfTheDropdown'); 

    //fetch the key/values pairs from the php script 
    jQuery.getJSON("pathToPhpFile.php", function(data) { 

     //empty out the existing options 
     dropdown.empty(); 

     //append the values to the drop down 
     jQuery.each(data, function(i, v) { 
      dropdown.append($('<option value="'+ data[i].id +'">'+data[i].label+'</option>'); 
     }); 
    }); 

}); 

утонченный код :)

<script type="text/javascript"> 
    $(document).ready(function(){ 

     $("#refeshButtonId").click(function() { 

      //fetch the key/values pairs from the php script 
      jQuery.getJSON("pathToPhpFile.php", function(data) { 

       var dropdown = $('#idOfTheDropdown'); 

       //empty out the existing options 
       dropdown.empty(); 

       //append the values to the drop down 
       jQuery.each(data, function(i, v) { 
        dropdown.append($('<option value="'+ i +'">'+ v +'</option>')); 
       }); 
      }); 

     });  
    }); 
</script> 

Answer 2

Используйте ajax для отправки данных в ваш php-файл, эхо html для нового выпадающего списка обратно в javascript, а затем используйте jquery для добавления нового содержимого. http://api.jquery.com/jQuery.ajax/

Answer 3

не пример кода, но я предполагаю, что это идет как этот

1. после размещения, создать функцию обратного вызова , который обновляет DOM, в частности варианты для выбора коробки

может быть, это что-то вроде этого в коде в jQuery:

$.ajax({ 
    method: 'POST', 
    data : $('#newjobfield').val(), 
    dataType: 'text' 
    success : function(data){ 
    $('#selectbox').append('<option value="' + data + '">' + data + '</option>') 
    } 
}); 

в PHP

function getNew() 
{ 
if ($_POST) 
{ 
    // update database 
    // then echo the record's 'name' (or whatever field you have in there) 
    echo $newInsertedJobName; 
    } 
    die(); 
} 

Теперь этот код отстой, так что просто скажите мне, если что-то не работает (я не проверял, потому что я сделал это несколько минут назад, в то время как на работе: P)