重置为自动完成的默认值，并使用javascript下拉表单字段

Question

I have 2 forms on a page. 我在页面上有2个表格。 One has id dropdownmenu . 一个有id dropdownmenu 。 When one of the values is selected (on change) the value gets posted to action.php . 选择其中一个值（更改时）后，该值将发布到action.php 。 The other form with id search_form is an autocomplete form, value is also posted to action.php . 另一个ID为search_form的表单是自动完成表单，值也发布到action.php 。

I would like to empty the form with id search_form when the user chooses a value with the dropdownmenu form and posts that value. 当用户使用dropdownmenu表单选择一个值并发布该值时，我想清空ID为search_form的表单。 And I would like to put the value of the dropdownmenu form back to one (default) when a user posts a value with the autocomplete form. 当用户使用自动完成表单发布值时，我想将dropdownmenu表单的值恢复为one （默认值）。

The dropdownmenu form with be used to select a province and make a search based on that. 下拉菜单窗体用于选择一个省并基于该省进行搜索。 The autocomplete form will be used to select a city and make a search based on that. 自动填写表格将用于选择城市并根据该城市进行搜索。 It is not right if they both have a value. 他们俩都有价值是不对的。 At least not visible for the user. 至少对用户不可见。

My knowledge of javascript is limited. 我对javascript的了解有限。 I searched everywhere and tried lots of combinations with $('#search_form').reset() , this.reset() , clearForm() , resetForm() but nothing seems to work. 我到处搜索，并尝试使用$('#search_form').reset() ， this.reset() ， clearForm() ， resetForm()很多组合，但似乎没有任何效果。 Below is my complete code. 下面是我的完整代码。

<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>

Answer 1

To reset #search_box autocomplete field: 要重置#search_box autocomplete字段：

$("#search_box").val('')

To reset #provincie select (dropdown) : 要重置#provincie select (dropdown) ：

$('#provincie').find('option:first').attr('selected', 'selected');
//or
$('#provincie').get(0).selectedIndex = 0;

重置为自动完成的默认值，并使用javascript下拉表单字段

问题描述

1 个解决方案

解决方案1
1 2014-07-16 12:26:24

重置为自动完成的默认值，并使用javascript下拉表单字段

问题描述

1 个解决方案

解决方案1 1 2014-07-16 12:26:24

解决方案1
1 2014-07-16 12:26:24