问题:您好,我希望能够在输入值时清除字段。
以下是表格:
目前,当用户选择一个城市时。如果邮政编码字段中有值,则将删除邮政编码字段值,反之亦然。但是,当我尝试对同一医院名称字段应用相同的逻辑时,不会将值保留为空,而是保留该值。
以下是我在用户输入邮政编码时所做的事情,城市下拉列表将被删除,反之亦然:
$(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>
答案 0 :(得分:1)
医院字段是一个文本字段,但您尝试以清除下拉字段的方式清除它。更新:
$(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()
是理想的。答案 1 :(得分:0)
我能够解决自己的问题。只是试着想象代码而不是简单的方法。我做了以下事情来解决我的问题:
$(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');*/
});
});