ドロップダウンリストの周りに境界線を作成する

Question

問題：郵便番号を入力したときに空白のままにすると、ドロップダウンボックスを囲む枠線を作成したいと思います。それ以外の場合は、そのまま残してください。

現在、ユーザーが郵便番号を入力して送信を選択すると、アラートがポップアップし、ユーザーがマイルを選択するまで結果が表示されません。これは、ユーザーが郵便番号を使用して場所を検索することを選択した場合にのみ発生します。それ以外の場合は、結果が入力されます。

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

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

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

 
\t \t $hospital.on("change",function(){ 
 
\t \t \t $zip.val('').trigger('input'); 
 
\t \t \t $miles.val('').trigger('input'); 
 
\t \t }); 
 
\t \t $zip.one("change", function(){ 
 
\t \t \t $miles.val('').trigger('input'); 
 
\t \t }); 
 
\t }); 
 
\t function checkTextField() { 
 
\t \t var distance = document.forms["UrgentCareSearch"]["distance"].value; 
 
\t \t var zip = document.forms["UrgentCareSearch"]["zip"].value; 
 
\t 
 
\t \t if(zip && !distance){ 
 
\t \t \t var alertMessage = "Please Select Distance When You Are Entering A Zip Code."; 
 
\t \t \t alert(alertMessage); 
 
\t \t \t return false; //Does not submit form 
 
\t \t } 
 
\t \t else 
 
\t \t \t return true; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script> 
 
<div class="panel panel-default"> 
 
\t <div class="panel-body"> 
 
\t \t <form name="UrgentCareSearch" ng-submit="SearchUrgentCare(searchParam);" novalidate role="form"> 
 
\t \t \t <div class="form-group"><input class="form-control" id="hospital" ng-model="searchParam.HospitalName" placeholder="Hospital Name" type="text" /></div> 
 

 
\t \t \t <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> 
 
\t \t \t \t \t \t <cfoutput query="HospCityFind"> 
 
\t \t \t \t \t \t <option value=#officecity#>#officecity#</option> 
 
\t \t \t \t \t \t </cfoutput> 
 
\t \t \t \t \t </select></div> 
 

 
\t \t \t <hr /> 
 
\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 <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" ng-options="mile.value for mile in miles"></select>---> 
 
\t \t \t \t \t \t <select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance"> 
 
\t \t \t \t \t \t \t <option value={{v.value}} ng-repeat="(k , v) in miles track by $index">{{v.value}}</option> 
 
\t \t \t \t \t \t </select> 
 
\t \t \t \t \t \t \t <div class="input-group-addon">miles</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\W]" 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" onclick="return checkTextField();" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div> 
 
\t \t </form> 
 
\t </div> 
 
</div>

Answer 1

[OK]を、これは動作するはずです：ここでは

は、スクリプトと一緒にフォームです。 は、それが

のdocument.getElementById（ "マイル"）空の場合はマイルのフィールドを強調表示することができcheckTextField（）関数を修正しました。style.border = "固体＃000000"

プラスあなたのマイルドロップボックスありそう

oninput =「ハイライトを消し（）」の場合にはそれを「」以外の値をボックスを削除するためにハイライトを消し関数を呼び出し としてタグoninput。

参照：JagannathanAlagurajan @http://www.w3schools.com/jsref/event_oninput.asp http://www.w3schools.com/js/js_htmldom_eventlistener.asp

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

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

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

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

 
function checkTextField() { 
 
    var distance = document.forms["UrgentCareSearch"]["distance"].value; 
 
    var zip = document.forms["UrgentCareSearch"]["zip"].value; 
 

 
    if (zip && !distance) { 
 
    var alertMessage = "Please Select Distance When You Are Entering A Zip Code."; 
 
     document.getElementById("miles").style.border = " solid #000000" 
 
    alert(alertMessage); 
 
    return false; //Does not submit form 
 
    } else 
 
    return true; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script> 
 
<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>---> 
 
       <select class="form-control" id="miles" name="distance" ng-model="searchParam.Distance" oninput = "unHighlight()"> 
 
       <option value={{v.value}} ng-repeat="(k , v) in miles track by $index">{{v.value}}</option> 
 
       </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" onclick="return checkTextField();" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /> 
 
     </div> 
 
     <script> 
 
     
 
     function unHighlight() { 
 
      
 
      var miles = document.getElementById("miles").value; 
 
         
 
     try{ 
 
     
 
      if(miles != ""){ 
 
     document.getElementById("miles").style.border = "none" 
 
      } 
 
     } 
 
      catch(err) 
 
      { 
 
          document.getElementById("miles").style.border = "none" 
 
       } 
 
      
 
        } 
 
     </script> 
 
     
 
    </form> 
 
    </div> 
 
</div>