Question

我正在尝试创建一个函数，当输入邮政编码并且城市中有任何条目时，它会清除表单中的该字段并显示城市列表。

当用户根据包含城市列表的下拉框输入城市时，同样适用。用户选择城市后，邮政编码字段将留空。

借助stackoverflow，

我能够获得这个。但是，出于某种原因，它仅适用于邮政编码字段。这意味着，一旦城市中的字段被清除，我就能够根据邮政编码检索列表项并继续更改邮政编码。当我选择一个城市时，邮政编码字段会清除，但不会显示新的结果。

不确定发生了什么。

＆＃13;

$('#zip').on('input', function() {
  $('#city').val("")
})
$('#city').on('input', function() {
  $('#zip').val("")

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="panel panel-default">
	<div class="panel-body">
<!---	<div id="loader" style="position: fixed; top:0; left:0; width:100%; height: 100%; background: url('loader.gif') center center #efefef"></div><!--Progress bar--->
		<form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate="" role="form">
			<div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div>

			<div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div>

			<div class="form-group"><select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty"><option disabled="disabled" selected="selected" value="">Specialty</option>
            <option value=""></option><option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option> </select></div>

			<div class="form-group">
             <SELECT name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City">
					   <option disabled="disabled" selected="selected" value="">City</option> 
						  <option value=""></option>
						  <cfoutput query="cityFind">
                           <option value=#city#>#city#</option>
						</cfoutput> 
					  </select>
                      
            <!---<select class="form-control" id="city" ng-model="searchParam.City"><option disabled="disabled" selected="selected" value="">City</option><option ng-repeat="c in Cities">{{c.City}}</option> </select>---->
            </div>

			<div class="row">
				<div class="col-xs-6 no-right-padding paddingLanguage">
					<div class="form-group widthLanguage">
              
                      
                    <select name="language" class="form-control" ng-model="searchParam.Language">
					    <option disabled="disabled" selected="selected" value="">Language</option>
                        <option value=""></option>
					 <cfoutput query="Languages">
						  <option value=#Language#>#Language#</option>
						</cfoutput> 
					  </select>
                      
                      
                      
					  <!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language">
					    <option disabled="disabled" selected="selected" value="">Language</option>
					    <option ng-repeat="l in Languages">{{l.Lang}}</option>
				      </select>--->
					</div>
				</div>

				<div class="col-xs-6 no-left-padding">
					<div class="form-group"><select class="form-control" name="gender" ng-model="searchParam.Gender">
                    <option disabled="disabled" selected="selected" value="">Gender</option>
                    <option value=""></option>
                    <option>Male</option><option>Female</option> </select></div>
				</div>
			</div>
			
			<hr class="hrDoctor" />
			<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
			
			<div class="row">
				<div class="col-xs-7 no-right-padding">
					<div class="form-group">
						<div class="input-group"><select class="form-control" name="distance" ng-model="searchParam.distance"><option selected="selected">5</option><option selected="selected">10</option><option selected="selected">15</option><option selected="selected">20</option> </select>

							<div class="input-group-addon">mi</div>
						</div>
					</div>
				</div>

				<div class="col-xs-5 no-left-padding widthZip">
					<div class="form-group"><input allow-pattern="[\d\-]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div>
				</div>
			</div>

			<div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
			<!---<div class="form-group buttonWidth resetButton"><input class="btn btn-primary btn-block" type="reset" value="Reset"  onClick="window.location.reload()"/></div>--->
		</form>
	<!---</div><!---Progress bar--->--->
	</div>
</div>

＆＃13;

Answer 1

您可以使用此代码：

 $(document).ready(function(){

           $('#zip').on("input",function(){
               $('#city option[value=""]').prop('selected',true);

           })

            $('#city').on("change",function(){
               $('#zip').val("");
            })
       })

最终代码：

＆＃13;

<html>
    <head>
    </head>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="panel panel-default">
	<div class="panel-body">
<!---	<div id="loader" style="position: fixed; top:0; left:0; width:100%; height: 100%; background: url('loader.gif') center center #efefef"></div><!--Progress bar--->
		<form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate="" role="form">
			<div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div>

			<div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div>

			<div class="form-group"><select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty"><option disabled="disabled" selected="selected" value="">Specialty</option>
            <option value=""></option><option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option> </select></div>

			<div class="form-group">
             <select name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City">
					   <option disabled="disabled" selected="selected" value="">City</option> 
						  <option value=""></option>
						  <cfoutput query="cityFind">
                           <option value=#city#>#city#</option>
						</cfoutput> 
             </select>
                      
            <!---<select class="form-control" id="city" ng-model="searchParam.City"><option disabled="disabled" selected="selected" value="">City</option><option ng-repeat="c in Cities">{{c.City}}</option> </select>---->
            </div>

			<div class="row">
				<div class="col-xs-6 no-right-padding paddingLanguage">
					<div class="form-group widthLanguage">
              
                      
                    <select name="language" class="form-control" ng-model="searchParam.Language">
					    <option disabled="disabled" selected="selected" value="">Language</option>
                        <option value=""></option>
					 <cfoutput query="Languages">
						  <option value=#Language#>#Language#</option>
						</cfoutput> 
					  </select>
                      
                      
                      
					  <!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language">
					    <option disabled="disabled" selected="selected" value="">Language</option>
					    <option ng-repeat="l in Languages">{{l.Lang}}</option>
				      </select>--->
					</div>
				</div>

				<div class="col-xs-6 no-left-padding">
					<div class="form-group"><select class="form-control" name="gender" ng-model="searchParam.Gender">
                    <option disabled="disabled" selected="selected" value="">Gender</option>
                    <option value=""></option>
                    <option>Male</option><option>Female</option> </select></div>
				</div>
			</div>
			
			<hr class="hrDoctor" />
			<div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div>
			
			<div class="row">
				<div class="col-xs-7 no-right-padding">
					<div class="form-group">
						<div class="input-group"><select class="form-control" name="distance" ng-model="searchParam.distance"><option selected="selected">5</option><option selected="selected">10</option><option selected="selected">15</option><option selected="selected">20</option> </select>

							<div class="input-group-addon">mi</div>
						</div>
					</div>
				</div>

				<div class="col-xs-5 no-left-padding widthZip">
					<div class="form-group"><input allow-pattern="[\d\-]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" /></div>
				</div>
			</div>

			<div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
			<!---<div class="form-group buttonWidth resetButton"><input class="btn btn-primary btn-block" type="reset" value="Reset"  onClick="window.location.reload()"/></div>--->
		</form>
	<!---</div><!---Progress bar--->--->
	</div>
</div>

        <script>
           $(document).ready(function(){
               
               $('#zip').on("input",function(){
                   $('#city option[value=""]').prop('selected',true);
                   
               })
               
                $('#city').on("change",function(){
                   $('#zip').val("");
                })
           })
        </script>
    </body>
</html>

＆＃13;

表格

1 个答案: