选择特定字段时，清除表单中的特定字段？
我能够清除表格中的特定字段：
$(document).ready(function(){
$('#zip').on("input",function(){
$('#city option[value=""]').prop('selected',true);
})
$('#city').on("change",function(){
$('#zip').val("");
})
})
以下是表格：
<div class="panel panel-default">
<div class="panel-body">
<form name="providerSearch" id="PS" 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 value=""></option><option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option> </select></div>
<div class="form-group">
<SELECT name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<option value=""></option>
<cfoutput query="cityFind">
<option 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">{{c.City}}</option> </select>---->
</div>
<div class="row">
<div class="col-xs-6 no-right-padding paddingLanguage">
<div class="form-group widthLanguage">
<select 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" 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>
</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" 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>
<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\-]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" data-default=""/></div>
</div>
</div>
<div class="form-group"><input id="submit" class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
<!---<div class="form-group buttonWidth resetButton"><input class="btn btn-primary btn-block" type="reset" value="Reset" onClick="window.location.reload()"/></div>--->
</form>
<!---</div><!---Progress bar--->--->
</div>
我遇到的问题是，在输入邮政编码并显示信息后选择城市时，所选城市的新结果不会显示。它出现在调试工具中，它仍然从zip字段中抓取并且不确定原因。
更新
＆＃13;
＆＃13;
＆＃13;
＆＃13;
$(document).ready(function(){
$('#zip').on("input",function(){
$('#city option[value=""]').prop('selected',true);
})
$('#city').on("change",function(){
$('#zip').val("");
})
})<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.16/angular.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<!--- <div id="loader" style="position: fixed; top:0; left:0; width:100%; height: 100%; background: url('loader.gif') center center #efefef"></div><!--Progress bar--->
<form name="providerSearch" id="PS" 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 value=""></option><option>Family practice</option><option>General practice</option><option>Internal medicine</option><option>Pediatrics</option> </select></div>
<div class="form-group">
<SELECT name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City">
<option disabled="disabled" selected="selected" value="">City</option>
<option value="">Sylmar</option>
<option value="">Santa Clarita</option>
<option value="">Los Angeles</option>
<option value="">Ventura</option>
<option value=""></option>
</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>
<div class="row">
<div class="col-xs-6 no-right-padding paddingLanguage">
<div class="form-group widthLanguage">
<select 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" 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>
</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" name="distance" ng-model="searchParam.distance">
<option selected="selected" value=""></option>
<option>5</option>
<option>10</option>
<option>15</option>
<option >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\-]" class="form-control" id="zip" maxlength="5" ng-model="searchParam.Zip" placeholder="Zip code" type="text" data-default=""/></div>
</div>
</div>
<div class="form-group"><input id="submit" class="btn btn-warning btn-block" ng-click="gotoElement('SearchResultsAnchor');" type="submit" value="Search" /></div>
<!---<div class="form-group buttonWidth resetButton"><input class="btn btn-primary btn-block" type="reset" value="Reset" onClick="window.location.reload()"/></div>--->
</form>
</div>
</div>
更新2
因此，使用Chrome开发人员工具，似乎不会使用我的ready函数删除最后一个条目。它显示以下内容：
正如您在最后一行所看到的那样，新城市已被识别，但旧的zip已被替换，但该值仍然被使用而不是被删除
是否可以强制搜索按钮从zip中删除旧值？
以下是占位符的代码。它主要用于解决IE 9及以下的问题。
它工作正常，但我不确定这是否导致zip字段无法识别为空白的问题。
(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();
}
});
我感谢所有得到的帮助，我很感激
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？