清除文本字段

Question

问题：您好，我希望能够在输入值时清除字段。

以下是表格：

目前，当用户选择一个城市时。如果邮政编码字段中有值，则邮政编码字段值将被删除，反之亦然。但是，当我尝试对同一个医院名称字段应用相同的逻辑时，该值不会留空，而是保留在那里。

以下是我在用户输入邮政编码时所做的，城市下拉菜单会被空白，反之亦然：

$(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>

Answer 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() 是理想的。
• jQuery 很昂贵，所以我将 jQuery 对象保存到变量中并尽可能调用变量。
• 将两个 zip 更改合并到同一个函数中。

Answer 2

我能够解决我自己的问题。只是想看中代码，而不是仅仅采用简单的方法。我做了以下事情来解决我的问题：

$(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');*/
    });
});