Javascript 明文字段

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

表格如下：

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

以下是我在用户输入邮政编码时所做的操作，城市下拉列表将被清空，反之亦然：

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

---

我能够解决我自己的问题。只是试着对代码进行想象，而不是简单的方法。我采取了以下措施来解决我的问题：

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

---

“医院”字段是一个文本字段，但您正在尝试以清除下拉字段的方式清除它。更新：

$(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更改合并到同一个函数中。

---

谢谢你的回答。