クリアテキストフィールド

Question

問題：こんにちは、値を入力するとフィールドをクリアすることができます。

次の形式は次のとおりです。ユーザーが都市を選択

現在、。郵便番号フィールドに値がある場合、郵便番号フィールド値は削除され、その逆もあります。しかし、同じ病院名フィールドに同じロジックを適用しようとすると、値を空白のままにするのではなく、値がそのまま残ります。

次は、私は、ユーザーが郵便番号を入力したとき、市はドロップダウンやっていることではブランクとその逆されます。

$(document).ready(function(){ 
    $('#zip').on("change",function(){ 
     $('#city option[value=""]').prop('selected',true).trigger('input'); 
     /*console.log('input');*/ 
    }); 

    $('#city').on("change",function(){ 
     $('#zip').val('').trigger('input'); 
     /*console.log('change');*/ 
    }); 
}); 

と正常に動作します。

しかし、ユーザーが病院の名前を入力した後、都市を入力するときにも同じロジックを適用しようとしました。市のドロップダウンは削除されますが、病院名フィールドは削除されません。私は病院の名前を入力し、都市を入力すると、郵便番号欄を空白にすることが、ままありません。ここで

$(document).ready(function(){ 
     $('#zip').on("change",function(){ 
      $('#city option[value=""]').prop('selected',true).trigger('input'); 
      /*console.log('input');*/ 
     }); 

     $('#city').on("change",function(){ 
      $('#zip').val('').trigger('input'); 
      /*console.log('change');*/ 
     }); 
    }); 
$(document).ready(function(){ 
     $('#zip').on("change",function(){ 
      $('#hospital option[value=""]').prop('selected',true).trigger('input'); 
      /*console.log('input');*/ 
     }); 

     $('#hospital').on("change",function(){ 
      $('#zip').val('').trigger('input'); 
      /*console.log('change');*/ 
     }); 
    }); 

は、私が使用しています形式です：

<cfset name_list1 = "Hosp"> 
<cfset name_list2 = "MMG,MG,RG">  
<cfquery name="HospCityFind" datasource="Source"> 
    SELECT Distinct officecity FROM UrgHosp 
    where utilizedspecialty in (<cfqueryparam value="#name_list1#" list="true" cfsqltype="cf_sql_varchar">) 
    and Company in (<cfqueryparam value="#name_list2#" list="true" cfsqltype="cf_sql_varchar">) 
    order by officecity 
    </cfquery> 

    <div class="panel panel-default"> 
    <div class="panel-body"> 
     <form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate="" role="form"> 
      <div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" /></div> 

      <div class="form-group"> 
      <select class="form-control" id="city" ng-model="searchParam.City"> 
      <option disabled="disabled" selected="selected" value="">City</option> 
      <option value=""></option> 
          <cfoutput query="HospCityFind"> 
          <option value=#officecity#>#officecity#</option> 
         </cfoutput> 
         </select></div> 

      <hr /> 
      <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" ng-options="mile.value for mile in miles"></select> 

          <div class="input-group-addon">miles</div> 
         </div> 
        </div> 
       </div> 

       <div class="col-xs-5 no-left-padding widthZip"> 
        <div class="form-group"><input allow-pattern="[\d\W]" 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> 
     </form> 
    </div> 
</div> 

Answer 1

私は私を解決することができました自分自身の問題。シンプルなアプローチに替えるのではなく、コードを気に入ろうとしました。私は問題を解決するために以下を行いました：

$(document).ready(function(){ 
    $('#zip').on("change",function(){ 
     $('#city option[value=""]').prop('selected',true).trigger('input'); 
     /*console.log('input');*/ 
    }); 

    $('#city').on("change",function(){ 
     $('#zip').val('').trigger('input'); 
     /*console.log('change');*/ 
    }); 

    $('#hospital').on("change",function(){ 
     $('#zip').val('').trigger('input'); 
     /*console.log('change');*/ 
    }); 
    $('#zip').on("change",function(){ 
     $('#hospital').val('').trigger('input'); 
     /*console.log('change');*/ 
    }); 
}); 

Answer 2

病院のフィールドはテキストフィールドですが、ドロップダウンフィールドをクリアする方法を試みています。更新日：

$(document).ready(function(){ 
    var $zip = $('#zip'); 
    var $city = $('#city'); 
    var $hospital = $('#hospital'); 

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

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

    $hospital.on("change",function(){ 
     $zip.val('').trigger('input'); 
    }); 
}); 

これは実際には実行されていませんが、あなたはそのアイデアを得ています。私が作った

その他の変更：

• つだけ$(document).ready()が理想的です。
• jQueryは高価なので、変数にjQueryオブジェクトを保存し、可能であれば変数を呼び出しました。
• 両方のジップが同じ機能に変更されました。