2016-08-16 9 views
0

郵便番号が入力され、市区町村に項目がある場合は、その項目のフォームをクリアして都市のリストを表示する機能を作成しようとしています。フォーム上の結果をクリア

ユーザが都市のリストを含むドロップダウンボックスに基づいて都市を入力した場合も同様です。ユーザーが都市を選択すると、郵便番号フィールドは空白のままになります。 stackoverflowのの助けを借りて

私はこれを得ることができました。ただし、何らかの理由で、郵便番号のフィールドでのみ機能します。都市のフィールドがクリアされると、郵便番号に基づいてリストアイテムを取得し、郵便番号を変更し続けることができます。都市を選択すると、郵便番号のフィールドはクリアされますが、新しい結果は表示されません。

何が起こっているのかわかりません。

$('#zip').on('input', function() { 
 
    $('#city').val("") 
 
}) 
 
$('#city').on('input', function() { 
 
    $('#zip').val("")
<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"> 
 
\t <div class="panel-body"> 
 
<!--- \t <div id="loader" style="position: fixed; top:0; left:0; width:100%; height: 100%; background: url('loader.gif') center center #efefef"></div><!--Progress bar---> 
 
\t \t <form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate="" role="form"> 
 
\t \t \t <div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div> 
 

 
\t \t \t <div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div> 
 

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

 
\t \t \t <div class="form-group"> 
 
      <SELECT name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City"> 
 
\t \t \t \t \t <option disabled="disabled" selected="selected" value="">City</option> 
 
\t \t \t \t \t \t <option value=""></option> 
 
\t \t \t \t \t \t <cfoutput query="cityFind"> 
 
          <option value=#city#>#city#</option> 
 
\t \t \t \t \t \t </cfoutput> 
 
\t \t \t \t \t </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> 
 

 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-xs-6 no-right-padding paddingLanguage"> 
 
\t \t \t \t \t <div class="form-group widthLanguage"> 
 
       
 
         
 
        <select name="language" class="form-control" ng-model="searchParam.Language"> 
 
\t \t \t \t \t  <option disabled="disabled" selected="selected" value="">Language</option> 
 
         <option value=""></option> 
 
\t \t \t \t \t <cfoutput query="Languages"> 
 
\t \t \t \t \t \t <option value=#Language#>#Language#</option> 
 
\t \t \t \t \t \t </cfoutput> 
 
\t \t \t \t \t </select> 
 
         
 
         
 
         
 
\t \t \t \t \t <!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language"> 
 
\t \t \t \t \t  <option disabled="disabled" selected="selected" value="">Language</option> 
 
\t \t \t \t \t  <option ng-repeat="l in Languages">{{l.Lang}}</option> 
 
\t \t \t \t  </select>---> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="col-xs-6 no-left-padding"> 
 
\t \t \t \t \t <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> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <hr class="hrDoctor" /> 
 
\t \t \t <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div> 
 
\t \t \t 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-xs-7 no-right-padding"> 
 
\t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t <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> 
 

 
\t \t \t \t \t \t \t <div class="input-group-addon">mi</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="col-xs-5 no-left-padding widthZip"> 
 
\t \t \t \t \t <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> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 

 
\t \t \t <div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div> 
 
\t \t \t <!---<div class="form-group buttonWidth resetButton"><input class="btn btn-primary btn-block" type="reset" value="Reset" onClick="window.location.reload()"/></div>---> 
 
\t \t </form> 
 
\t <!---</div><!---Progress bar--->---> 
 
\t </div> 
 
</div>

答えて

1

あなたはこのコードを使用することができます。最終的なコード

$(document).ready(function(){ 

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

      }) 

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

を:

<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"> 
 
\t <div class="panel-body"> 
 
<!--- \t <div id="loader" style="position: fixed; top:0; left:0; width:100%; height: 100%; background: url('loader.gif') center center #efefef"></div><!--Progress bar---> 
 
\t \t <form name="providerSearch" ng-submit="SearchProvider(searchParam);" novalidate="" role="form"> 
 
\t \t \t <div class="form-group"><input class="form-control" id="physiciansfirstname" ng-model="searchParam.FirstName" placeholder="First name:" type="text" /></div> 
 

 
\t \t \t <div class="form-group"><input class="form-control" id="physicianslastname" ng-model="searchParam.LastName" placeholder="Last name:" type="text" /></div> 
 

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

 
\t \t \t <div class="form-group"> 
 
      <select name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City"> 
 
\t \t \t \t \t <option disabled="disabled" selected="selected" value="">City</option> 
 
\t \t \t \t \t \t <option value=""></option> 
 
\t \t \t \t \t \t <cfoutput query="cityFind"> 
 
          <option value=#city#>#city#</option> 
 
\t \t \t \t \t \t </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> 
 

 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-xs-6 no-right-padding paddingLanguage"> 
 
\t \t \t \t \t <div class="form-group widthLanguage"> 
 
       
 
         
 
        <select name="language" class="form-control" ng-model="searchParam.Language"> 
 
\t \t \t \t \t  <option disabled="disabled" selected="selected" value="">Language</option> 
 
         <option value=""></option> 
 
\t \t \t \t \t <cfoutput query="Languages"> 
 
\t \t \t \t \t \t <option value=#Language#>#Language#</option> 
 
\t \t \t \t \t \t </cfoutput> 
 
\t \t \t \t \t </select> 
 
         
 
         
 
         
 
\t \t \t \t \t <!---<select name="language" class="form-control widthLanguage" id="language" ng-model="searchParam.Language"> 
 
\t \t \t \t \t  <option disabled="disabled" selected="selected" value="">Language</option> 
 
\t \t \t \t \t  <option ng-repeat="l in Languages">{{l.Lang}}</option> 
 
\t \t \t \t  </select>---> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="col-xs-6 no-left-padding"> 
 
\t \t \t \t \t <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> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <hr class="hrDoctor" /> 
 
\t \t \t <div style="margin-top:-10px; margin-bottom:10px; text-align:center; font-size:8pt! important">* or Search by Zip code radius *</div> 
 
\t \t \t 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-xs-7 no-right-padding"> 
 
\t \t \t \t \t <div class="form-group"> 
 
\t \t \t \t \t \t <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> 
 

 
\t \t \t \t \t \t \t <div class="input-group-addon">mi</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="col-xs-5 no-left-padding widthZip"> 
 
\t \t \t \t \t <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> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 

 
\t \t \t <div class="form-group"><input class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div> 
 
\t \t \t <!---<div class="form-group buttonWidth resetButton"><input class="btn btn-primary btn-block" type="reset" value="Reset" onClick="window.location.reload()"/></div>---> 
 
\t \t </form> 
 
\t <!---</div><!---Progress bar--->---> 
 
\t </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>

+0

私はまだ質問で同じ結果を得ています。私は質問があります:あなたはおそらくid "都市"が問題かもしれないと感じますか? –

+0

@RobertoFlores、Run Codeスニペットをクリックすると、結果はどうなりますか? – Ehsan

+0

@ ehsan:はい、スニペットで作業していますが、私が最後にそれをやろうとすると、都市を選択すると新しい結果が表示されません –

関連する問題