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框

回答

相关问题