Erstellen Rahmen um Drop-Down-

Question

Problem: Ich möchte einen Rahmen um eine Dropdown-Box erstellen, wenn leer gelassen, wenn der Benutzer eine Postleitzahl eingibt. Ansonsten lass es so wie es ist.

Derzeit, wie es funktioniert, wenn der Benutzer einen Code zip betritt und wählt die einreichen, wird ein Alarm Pop-up und Ergebnisse werden nicht angezeigt, bis der Benutzer die Meilen auswählt. Dies geschieht nur, wenn der Benutzer wählt einen Standort über eine Postleitzahl zu finden. Andernfalls werden die Ergebnisse ausgefüllt. Hier

ist die Form zusammen mit dem Skript:

$(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, das funktionieren soll. Modified Sie checkTextField() Funktion Meilen Feld zu markieren, wenn es leer ist

document.getElementById ("Meilen"). Style.border = "solid # 000000"

plus Ihre Meilen Dropbox hat oninput Tag als so

oninput = „hebt sie()“ , die die Funktion aufruft, hebt sie die Box, falls der Wert der es etwas anderes als „“ zu entfernen.

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