下拉菜单不会清除特定的下拉选项
问题：我有一个查找医生的表单。用户可以通过两种方式查找医生：输入医生/其他事物的名称或通过拉链和距离：
因此，当用户想要基于邮政编码半径进行查看时，它会在第一个搜索选项中将下拉列表和输入字段留空，反之亦然。
但是，如果用户输入专业，城市或性别，则此功能无效。这意味着，如果用户在显示结果后决定使用邮政编码，则不会清除之前的条目。
正如您在下图中看到的那样，当我尝试寻找基于拉链和里程的医生时，之前的入口，即城市，并没有清除。我怎样才能使用angularjs实现这一目标。 ：
以下是表格：
<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 disabled="disabledvalue=""></option>---><!---<option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option>
</select>--->
<div class="form-group">
<select class="form-control" id="providerSpecialty" ng-model="searchParam.Specialty">
<option selected="selected" value="">Specialty</option>
<!---<option value=""></option>--->
<cfoutput query="SpFind">
<option value=#ProviderSpecialty#>#ProviderSpecialty#</option>
</cfoutput>
</select>
</div>
<div class="form-group">
<select class="form-control" id="city" ng-model="searchParam.City">
<option selected="selected" value="">City</option>
<!---<option value=""></option>--->
<cfoutput query="cityFind">
<option value=#trim(city)#>#trim(city)#</option>
<!---<option ng-selected="{{searchParam.City==#city#?true:false}} 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" value="{{c.City}}">{{c.City}}</option> </select>--->
</div>
<div class="row">
<!---<div class="col-xs-6 no-right-padding paddingLanguage">
<div class="form-group widthLanguage">
<select id="language" 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" id="gender" name="gender" ng-model="searchParam.Gender">
<option 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" id="miles" name="distance" ng-model="searchParam.Distance">
<!---<option selected="selected" value="" disabled="disabled">Miles</option>--->
<option selected="disabled" value=""></option>
<option value={{v.value}} ng-repeat="(k , v) in miles track by $index">{{v.value}}</option>
<!---<option selected="disabled" value=""></option>
<option selected="selected" value="5">5</option>
<option selected="selected" value="10">10</option>
<option selected="selected" value="15">15</option>
<option selected="selected" value="20">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\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(); overlayDisplayButton();" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" />
<div style="margin-top:10pt"><button type="reset" class="btn btn-info btn-block" onclick="location.href = 'http://brokers_dev2.rmgtest.com/index.cfm/doctor-finder/';">Clear Form</button></div>
</div>
</form>
以下是我将这些字段留空的做法：
$(document).ready(function(){
var $zip = $('#zip');
var $city = $('#city');
var $specialty = $('#providerSpecialty');
var $fName = $('#physiciansfirstname');
var $lName = $('#physicianslastname');
/*var $language = $('#language');*/
var $gender = $('#gender');
var $miles = $('#miles').val('');
$zip.on("change",function(){
$('#city option[value=""]').prop('selected',true).trigger('input');
$('#providerSpecialty option[value=""]').prop('selected',true).trigger('input');
$fName.val('').trigger('input');
$lName.val('').trigger('input');
$('#gender option[value=""]').prop('selected',true).trigger('input');
//$('#language option[value=""]').prop('selected',true).trigger('input');
});
$city.on("change",function(){
$zip.val('').trigger('input');
$miles.val('').trigger('input');
});
$specialty.on("change",function(){
$zip.val('').trigger('input');
$miles.val('').trigger('input');
});
$fName.on("change",function(){
$zip.val('').trigger('input');
$miles.val('').trigger('input');
});
$lName.on("change",function(){
$zip.val('').trigger('input');
$miles.val('').trigger('input');
});
$gender.on("change",function(){
$zip.val('').trigger('input');
$miles.val('').trigger('input');
});
$miles.on("change", function(){
$('#city option[value=""]').prop('selected',true).trigger('input');
$('#providerSpecialty option[value=""]').prop('selected',true).trigger('input');
$fName.val('').trigger('input');
$lName.val('').trigger('input');
$('#gender option[value=""]').prop('selected',true).trigger('input');
/*$('#language option[value=""]').prop('selected',true).trigger('input');*/
});
我没有看到我做错了什么。任何帮助将不胜感激
以下是我在chrome上使用Developer Tool时所看到的内容。在最后一个条目中，当我选择根据拉链和里程数查找供应商时，所选择的专业未被清除：
这是js文件@DanielW：
(
function(){
var $scope, $location;
var indexApp = angular.module('indexApp',['ui.bootstrap']);
indexApp.controller('IndexController',function($scope,$http,$location,anchorSmoothScroll){
$scope.Lang = 'initVal';
$scope.ShowResults = false;
$scope.ShowDesc = true;
$scope.NoResults = false;
$scope.currentPage = 1;
$scope.maxPageNumbersToShow = 10;
$scope.formModel = {};
$scope.searchMode = 0;
$scope.miles = [{'value':'5'},{'value':'10'},{'value':'15'},{'value':'20' }];
$scope.Specialties = [{'value':'Family practice'},{'value':'General practice'},{'value':'Internal medicine'},{'value':'Pediatrics'}];
$scope.Gender = [{'value':'Male'},{'value':'Female'}];
$scope.Languages = {};
$scope.Cities = {};
$scope.searchParam = {};
$("input").removeAttr('disabled');
$scope.searchParam.Distance = $scope.miles[0];
$scope.GetCurrentZip = function (){
try{
var lon, lat;
// console.log('starting geoposition code.');
if("geolocation" in navigator){
window.navigator.geolocation.getCurrentPosition(function(pos){
lat = pos.coords.latitude.toFixed(3);
lon = pos.coords.longitude.toFixed(3);
// console.log(lat + ' ' + lon);
$http.get("/includes/ReturnCurrentZipcode.cfm?Lat=" + lat + "&Lon=" + lon)
.then(function(response){
$scope.searchParam.Zip = response.data;
})
})
}
else{ console.log('No geolocation'); }
}
catch(err) { console.log(err.message); }
}
$scope.GetCityList = function (){
try{
$http.get("/includes/ReturnCityList.cfm")
.then(function(response){
$scope.Cities = response.data.Cities;
})
}
catch(err){}
}
$scope.GetLangList = function (){
try{
$http.get("/Brokers-en-us/includes/remote/ReturnLangList.cfm")
.then(function(response){
$scope.Languages = response.data.Languages;
})
}
catch(err){}
}
$scope.SearchProvider = function(searchParam){
try{
$scope.searchMode = 1;
var queryString='';
if($scope.formModel && $scope.formModel !== searchParam){
$scope.resultsCount = 0;
currentPage = 1;
}
if(searchParam){
$scope.formModel = searchParam;
for(var param in searchParam){
if(searchParam.hasOwnProperty(param)){
var paramValue = searchParam[param].value ? searchParam[param].value.trim() : searchParam[param].trim();
if (paramValue.length > 0)
queryString += param + '=' + paramValue + '&';
}
}
}
console.log(queryString);
queryString= '?' + queryString + 'currentpage=' + $scope.currentPage;
$http.get("/includes/ReturnProvidersList.cfm" + queryString)
.then(function(response){
$scope.providers = response.data.provider;
$scope.resultsCount = response.data.rowCount;
if (!$scope.providers){
$scope.NoResults = true;
$scope.ShowResults = false;
$scope.ShowDesc = false;
}
else{
$scope.NoResults = false;
$scope.ShowResults = true;
$scope.ShowDesc = false;
}
})
}
catch(err){ alert('No response.: ' + err.message); }
}
$scope.$watchGroup(['currentPage'], function(){
try{
if($scope.searchMode == 1){
$scope.SearchProvider($scope.formModel);
}
}
catch(err){}
});
$scope.GetCityList();
$scope.GetLangList();
$scope.GetCurrentZip();
$scope.gotoElement = function (eID){
//http://jsfiddle.net/brettdewoody/y65G5/
// set the location.hash to the id of
// the element you wish to scroll to.
//$location.hash('bottom');
// call $anchorScroll()
var browserWidth = screen.availWidth;
if (browserWidth < 768)
anchorSmoothScroll.scrollTo(eID);
};
});
indexApp.service('anchorSmoothScroll', function(){
this.scrollTo = function(eID) {
// This scrolling function
// is from http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript
var startY = currentYPosition();
var stopY = elmYPosition(eID);
var distance = stopY > startY ? stopY - startY : startY - stopY;
if (distance < 100) {
scrollTo(0, stopY); return;
}
var speed = Math.round(distance / 100);
if (speed >= 20) speed = 20;
var step = Math.round(distance / 25);
var leapY = stopY > startY ? startY + step : startY - step;
var timer = 0;
if (stopY > startY) {
for ( var i=startY; i<stopY; i+=step ) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY += step; if (leapY > stopY) leapY = stopY; timer++;
} return;
}
for ( var i=startY; i>stopY; i-=step ) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
}
function currentYPosition() {
// Firefox, Chrome, Opera, Safari
if (self.pageYOffset) return self.pageYOffset;
// Internet Explorer 6 - standards mode
if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
// Internet Explorer 6, 7 and 8
if (document.body.scrollTop) return document.body.scrollTop;
return 0;
}
function elmYPosition(eID) {
var elm = document.getElementById(eID);
var y = elm.offsetTop;
var node = elm;
while (node.offsetParent && node.offsetParent != document.body) {
node = node.offsetParent;
y += node.offsetTop;
} return y;
}
};
});
indexApp.directive('allowPattern',[allowPatternDirective]);
indexApp.directive('popPopup',[describePopup]);
indexApp.directive('pop', function pop ($tooltip, $timeout) {
var tooltip = $tooltip('pop', 'pop', 'event');
var compile = angular.copy(tooltip.compile);
tooltip.compile = function (element, attrs) {
var first = true;
attrs.$observe('popShow', function (val) {
if (JSON.parse(!first || val || false)) {
$timeout(function(){
element.triggerHandler('event');
});
}
first = false;
});
return compile(element, attrs);
};
return tooltip;
});
indexApp.filter('PhoneNumber', function(){
return function(phoneNumber){
var dash = '-';
var openParen = '(';
var closeParen = ') ';
if(phoneNumber){
var pn = phoneNumber;
pn = [pn.slice(0, 6), dash, pn.slice(6)].join('');
pn = openParen + [pn.slice(0, 3), closeParen, pn.slice(3)].join('');
return pn;
}
return phoneNumber;
}
});
indexApp.filter('Zip', function(){
return function(zipcode){
var dash = '-';
if(zipcode && zipcode.length > 5){
var zc = zipcode;
zc = [zc.slice(0, 5), dash, zc.slice(5)].join('');
return zc;
}
return zipcode;
}
});
function allowPatternDirective(){
return{
restrict: "A",
compile: function(tElement, tAttrs){
return function(scope, element, attrs){
element.bind("keypress", function(event){
var keyCode = event.which || event.keyCode;
var keyCodeChar = String.fromCharCode(keyCode);
if(!keyCodeChar.match(new RegExp(attrs.allowPattern, "i"))){
event.preventDefault();
return false;
}
});
}
}
}
}
function describePopup(){
return {
restrict: 'EA',
replace: true,
scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
templateUrl: 'template/popover/popover.html'
};
}
})();
(function($) {
// @todo Document this.
$.extend($,{ placeholder: {
browser_supported: function() {
return this._supported !== undefined ?
this._supported :
( this._supported = !!('placeholder' in $('<input type="text">')[0]) );
},
shim: function(opts) {
var config = {
color: '#888',
cls: 'placeholder',
selector: 'input[placeholder], textarea[placeholder]'
};
$.extend(config,opts);
return !this.browser_supported() && $(config.selector)._placeholder_shim(config);
}
}});
$.extend($.fn,{
_placeholder_shim: function(config) {
function calcPositionCss(target)
{
var op = $(target).offsetParent().offset();
var ot = $(target).offset();
return {
top: ot.top - op.top,
left: ot.left - op.left,
width: $(target).width()
};
}
function adjustToResizing(label) {
var $target = label.data('target');
if(typeof $target !== "undefined") {
label.css(calcPositionCss($target));
$(window).one("resize", function () { adjustToResizing(label); });
}
}
return this.each(function() {
var $this = $(this);
if( $this.is(':visible') ) {
if( $this.data('placeholder') ) {
var $ol = $this.data('placeholder');
$ol.css(calcPositionCss($this));
return true;
}
var possible_line_height = {};
if( !$this.is('textarea') && $this.css('height') != 'auto') {
possible_line_height = { lineHeight: $this.css('height'), whiteSpace: 'nowrap' };
}
var isBorderBox = ($this.css('box-sizing') === 'border-box');
var isTextarea = $this.is('textarea');
var ol = $('<label />')
.text($this.attr('placeholder'))
.addClass(config.cls)
.css($.extend({
position:'absolute',
display: 'inline',
'float':'none',
overflow:'hidden',
textAlign: 'left',
color: config.color,
cursor: 'text',
paddingTop: !isTextarea && isBorderBox ? '0' : $this.css('padding-top'),
paddingRight: $this.css('padding-right'),
paddingBottom: !isTextarea && isBorderBox ? '0' : $this.css('padding-bottom'),
paddingLeft: $this.css('padding-left'),
fontSize: $this.css('font-size'),
fontFamily: $this.css('font-family'),
fontStyle: $this.css('font-style'),
fontWeight: $this.css('font-weight'),
textTransform: $this.css('text-transform'),
backgroundColor: 'transparent',
zIndex: 99,
}, possible_line_height))
.css(calcPositionCss(this))
.attr('for', this.id)
.data('target',$this)
.click(function(){
if (!$(this).data('target').is(':disabled')) {
$(this).data('target').focus();
}
})
.insertBefore(this);
$this
.data('placeholder', ol)
.on('keydown', function () {
ol.hide();
})
.on('blur change', function () {
ol[$this.val().length ? 'hide' : 'show']();
})
.triggerHandler('blur');
$(window).one("resize", function () { adjustToResizing(ol); });
}
});
}
});
})(jQuery);
jQuery(document).add(window).bind('ready load', function() {
if (jQuery.placeholder) {
jQuery.placeholder.shim();
}
});
1 个答案:
答案 0 :(得分：0)
最简单的解决方案是定义其他功能，如果这些值已经存在于<ul *ngIf="results">
<li *ngFor="let project of results.name"></li>
</ul>
等变量中，则会检查这些值。
在用户点击搜索按钮后使用if条件语句。
$zip, $specialty, $fName, $lName定义一个函数if条件，它将验证搜索的两个部分是否都被填满。 如果条件需要存在于按钮搜索点击事件功能中。
$('btn btn-warning btn-block').on('click', function(){
});
警告框用于检查条件语句在实现功能之前是否正常工作。
否则，请退房，而不是$('btn btn-warning btn-block').on('click', function(){
if($zip !=0 && $fName !=0 ){
confirm('testing functionality');
}
});
，$zip !=0。
应用其他功能，将在清除表单按钮上执行click事件，将值传递给邮政编码输入字段并执行搜索按钮事件。
!$zip如果清除表单按钮确实清除变量中存在的值，则使用确认签出。
$('btn btn-info btn-block').click();
如果变量内部确实存在值，则将值重新分配为null并将邮政编码值存储到附加变量中。
confirm(fName);
获取邮政编码输入字段并将存储的值传递给它。 使用click方法执行搜索按钮功能。
var $city = null;
var $specialty = null;
var $fName = null;
var $lName = null;
valueZipAdditional = $('input#zip').value(additionalVariable);
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？