JQuery AJAX - заполнение текстового поля и коробки с dropbown

Question

Это мой первый раз, используя JQuery AJAX, поэтому я не очень хорошо знаком с синтаксисом. Сейчас я вытаскиваю набор значений из базы данных и заполняю раскрывающийся список. Мне нужен AJAX, чтобы заполнить три других поля с жестко запрограммированной информацией, когда они делают выбор из раскрывающегося списка. Как только я получу AJAX, работаю правильно, я бы хотел запросить базу данных и вернуть результаты на основе их выбора из раскрывающегося списка.

<div class="panel-body"> 
    <div class="form-group"> 
     <label for="nomName" class="col-sm-3 control-label">Name:</label> 
     <div class="col-sm-8">    
      <input type="text" class="form-control" data-validation="required" name="nomName" id="nomName" placeholder="Name" maxlength="50">   
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="nomTitle" class="col-sm-3 control-label">Title:</label> 
     <div class="col-sm-8"> 
      <input type="text" class="form-control" data-validation="required" name="nomTitle" id="nomTitle" placeholder="Title" maxlength="50"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="nomDept" class="col-sm-3 control-label">Department:</label> 
     <div class="col-sm-8"> 
      <select class="form-control" name="nomDept" id="nomDept"> 
       <option value="" disabled selected>Select a Department...</option> 
       <option value="Building Services">Building Services</option> 
       <option value="Construction Management">Construction Management</option> 
      </select> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="nomGUID" class="col-sm-3 control-label">AU Email/GUID:</label> 
     <div class="col-sm-8"> 
      <select class="form-control" name="nomGUID" id="nomGUID"> 
       <option value="" disabled selected>Select a Person...</option> 
       <?php 
       while($row = mssql_fetch_array($user_list)){ 
        echo "<option value=\"" . $row['id'] . "\">" . $row['id'] . "</option>"; 
       } 
       ?> 
      </select> 
     </div> 
    </div> 
</div> 

И вот мой AJAX. Я знаю, что это неправильно, поэтому я бы оценил какое-то объяснение за чьим-то решением, если они его предоставят. Благодарю.

$(function() { 
    var options = { 
     "Option 1": "value 1", 
     "Option 2": "value 2", 
     "Option 3": "value 3" 
    } 
    $('#nomGUID').change(function() { 
     $.ajax({ 
      url: 'test.php', 
      success: function('#options') { 
       $('#nomDept').empty(); 
       $('#nomTitle').html('Test AJAX'); 
      } 
     }) 
    } 
} 

Answer 1

«успех» предназначен для передачи в обработчике обратного вызова. Вы можете реализовать обработчик либо анонимной функцией, либо именованной функцией. Синтаксис, который у вас есть, является незаконным и не делает этого.

Читайте на анонимные функции: http://www.w3schools.com/js/js_function_definition.asp

Я принимаю ваш вызов AJAX для test.php будет возвращать какой-то ответ JSON. Например:

{ 
    "title": "New Title", 
    "foo": "bar", 
    "baz": "qux", 
    "departments": [ 
     "Building Services", 
     "Construction Management" 
    ] 
} 

Вы можете реализовать функцию обратного вызова успеха с использованием именованной функции. Внутри обратного вызова вы задаете свои параметры.

$.ajax({ 
    url: 'test.php', 
    success: myAjaxSuccessHandler 
}); 

function myAjaxSuccessHandler(data) { 
    $('#nomDept').empty().append(
     $('#nomTitle').html(data.title); 

     $.map(departments, function(element) { 
      return $('<option></option>').val(element).text(element); 
     }) 
    ); 
} 

Вы можете также выбрать использовать анонимную функцию, как это:

$.ajax({ 
    url: 'test.php', 
    success: function(data) { 
     $('#nomTitle').html(data.title); 

     $('#nomDept').empty().append(
      $.map(departments, function(element) { 
       return $('<option></option>').val(element).text(element); 
      }) 
     ); 
    } 
}); 

Answer 2

Добавить данные в отдельный раскрывающийся список.

content += "<option value=1>1</value>"; 
content += "<option value=2>2</value>"; 
content += "<option value=3>3</value>"; 
$('#nomGUID').change(function() { 
     $.ajax({ 
      url: 'test.php', 
      success: function(response){ 
       $('#nomDept').empty(); 
       $('#nomTitle').append(content); 
      } 
     }) 
    }