使用javascript重置为自动完成和下拉表单字段的默认值
我一页有两张表格。一个具有id使用javascript重置为自动完成和下拉表单字段的默认值,javascript,jquery,forms,jquery-ui,autocomplete,Javascript,Jquery,Forms,Jquery Ui,Autocomplete,我一页有两张表格。一个具有id下拉菜单。当选择其中一个值时(更改时),该值将被发布到action.php。另一个id为search\u form的表单是一个自动完成表单,其值也会发布到action.php 当用户使用下拉菜单表单选择一个值并发布该值时,我想用idsearch\u form清空表单。当用户使用自动完成表单发布值时,我想将下拉菜单表单的值返回到one(默认值) 带有的下拉菜单表单可用于选择一个省并基于该省进行搜索。自动完成表单将用于选择一个城市并在此基础上进行搜索。如果它们都有一个值
下拉菜单
。当选择其中一个值时(更改时),该值将被发布到action.php
。另一个id为search\u form
的表单是一个自动完成表单,其值也会发布到action.php
当用户使用下拉菜单表单选择一个值并发布该值时,我想用idsearch\u form
清空表单。当用户使用自动完成表单发布值时,我想将下拉菜单表单的值返回到one
(默认值)
带有的下拉菜单表单可用于选择一个省并基于该省进行搜索。自动完成表单将用于选择一个城市并在此基础上进行搜索。如果它们都有一个值,这是不对的。至少对用户不可见
我对javascript的知识有限。我到处搜索,并尝试了大量使用$(“#搜索表单”).reset()
,this.reset()
,clearForm()
,resetForm()
的组合,但似乎没有任何效果。下面是我的完整代码
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script>
$(function () {
$('form').on('change', function (e) {
e.preventDefault();
$.ajax({
type: 'post',
url: 'action.php',
data: $('form').serialize(),
dataType: 'html',
success: function(response){
$("#responsecontainer").html(response);
}
});
});
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#search_box").autocomplete({
source: "/includes/search.php",
minLength: 2,
select: function(event, ui) {
if(ui.item){
$(event.target).val(ui.item.value);
}
$.ajax({
type: 'post',
url: 'action.php',
data: $('form').serialize(),
dataType: 'html',
success: function(response){
$("#responsecontainer").html(response);
}
});
}
});
});
</script>
</head>
<body>
<form id="dropdownmenu" action="/" method="post">
<select class="form-control" name="provincie" id="provincie">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</form>
<form id="search_form" action="/" method="post">
<input id="search_box" type="text" name="search_box" /></form>
<input name="submit" type="submit" value="submit">
</form>
<div id="responsecontainer"></div>
</body>
</html>
$(函数(){
$('form')。关于('change',函数(e){
e、 预防默认值();
$.ajax({
键入:“post”,
url:'action.php',
数据:$('form')。序列化(),
数据类型:“html”,
成功:功能(响应){
$(“#responsecontainer”).html(响应);
}
});
});
});
jQuery(文档).ready(函数(){
$(“#搜索框”)。自动完成({
来源:“/includes/search.php”,
最小长度:2,
选择:功能(事件、用户界面){
if(ui.item){
$(event.target).val(ui.item.value);
}
$.ajax({
键入:“post”,
url:'action.php',
数据:$('form')。序列化(),
数据类型:“html”,
成功:功能(响应){
$(“#responsecontainer”).html(响应);
}
});
}
});
});
一个
两个
三
四
五
要重置#搜索框
自动完成
字段:
$("#search_box").val('')
要重置#provincie
请选择(下拉菜单)
:
$('#provincie').find('option:first').attr('selected', 'selected');
//or
$('#provincie').get(0).selectedIndex = 0;