JQuery AJAX - 填充文本框和dropbown框

這是我第一次使用JQuery AJAX，所以我對語法不是很熟悉。現在我從數據庫中提取一組值並填充下拉框。我需要AJAX做的是當他們從下拉框中選擇時，用硬編碼信息填充其他三個字段。一旦我得到AJAX正常工作，然後我想查詢數據庫並根據他們從下拉列表中選擇返回結果。JQuery AJAX - 填充文本框和dropbown框

<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'); 
      } 
     }) 
    } 
}

來源

2016-09-23 collint25

「成功」是用於傳入回調處理程序。您可以使用匿名函數或命名函數來實現處理程序。你擁有的語法是非法的，並且都不是。

閱讀上匿名函數： 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); 
      }) 
     ); 
    } 
});

來源

2016-09-23 15:54:51 Andrew

謝謝！儘管我不得不稍微編輯一下，但這最終爲我工作。這裏有一個小提琴，以防任何人感興趣https://jsfiddle.net/collint25/bc8qdk3n/1/ – collint25

將數據附加到特定的下拉框。

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); 
      } 
     }) 
    }

來源

2016-09-23 15:30:59

JQuery AJAX - 填充文本框和dropbown框

回答

相關問題