有些Javascript函数和标签在Chrome中不起作用，但是它在Mozilla中工作得很好。帮我摆脱这些？

Question

在下面的代码中，我们创建了两个DropDown.based，一个“属性类型”，第二个下拉“属性子类型”应该是Change.Its，在火狐中工作正常，而不是在Chrome中。

当我选择房地产类型时，第二次下降时仅在dropdown.and中的住宅价值与商业地产类型相同。

JSP代码

<div class="col-sm-12">
    <div class="col-sm-6">
        <div class="form-group">
             <label for="proptype">Property Type</label>
             <form:select path="Property_type" class="form-control" id="proptype">
                  <form:option value="">select Property Type</form:option>
                  <form:option class="ares" value="Residential">Residential</form:option>
                  <form:option class="cres" value="Commercial">Commercial</form:option>
            </form:select>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group">
             <label for="propcat">Property Category</label>
             <form:select path="property_category" class="form-control" id="propcat">
                   <form:option value="">select category</form:option>
                  <form:option value="New Project">New Project</form:option>
                  <form:option value="Resale">Resale</form:option>
                  <form:option value="Rent">Rent</form:option>
                  <form:option value="PG">PG</form:option>
            </form:select>
        </div>
    </div>
</div>

<div class="col-sm-12">
    <div class="col-sm-6"  >
        <div class="form-group" id="testres">
             <label for="propsubtype">Property Sub Type</label>
             <form:select path="Property_sub_type_res" class="form-control">
                   <form:option value="">select</form:option>
                  <form:option value="Flat/Apartment">Flat/Apartment</form:option>
                  <form:option value="House">House</form:option>
                  <form:option value="Villa">Villa</form:option>
                  <form:option value="Farm House">Farm House</form:option>
                  <form:option value="Row House">Row House</form:option>
                  <form:option value="Penta House">Penta House</form:option>
            </form:select>
        </div>
    </div>

    <div class="col-sm-6" >
        <div class="form-group" id="testcom">
            <label for="propsubtype">Property Sub Type</label>
            <form:select path="Property_sub_type_com" class="form-control">
                  <form:option value="">select</form:option>
                  <form:option value="Office">Office</form:option>
                  <form:option value="Shop/Show Room">Shop/Show Room</form:option>
                  <form:option value="Industrial Land">Industrial Land</form:option>
                  <form:option value="Warehouse">Warehouse</form:option>
                  <form:option value="Industrial Building">Industrial Building</form:option>
                  <form:option value="ndustrial Shed">Industrial Shed</form:option>
            </form:select>
        </div>
    </div>

    <div class="col-sm-6">
        <div class="form-group">
             <label for="propunit">Property Unit Type</label>
             <form:select path="property_unit_type" class="form-control 2col active" multiple="multiple" id="propunit">
                  <form:option value="1">1 BHK</form:option>
                  <form:option value="2">2 BHK</form:option>
                  <form:option value="3">3 BHK</form:option>
                  <form:option value="4">4 BHK</form:option>
                  <form:option value="4+">4+ BHK</form:option>
            </form:select>

        </div>
    </div>
</div>

Javascript函数

$(document).ready(function() {

    $("#testcom").hide();
    $("#propunit").prop( "disabled", false );
    $('.ares').click(function() {
         $("#testres").show('slow');
         $("#testcom").hide('slow');
         $("#propunit").prop( "disabled", false );
    });
    $('.cres').click(function(){
         $("#testres").hide('slow');
         $("#testcom").show('slow');
         $("#propunit").prop( "disabled", true );
    });
});

Answer 1

您不对选项使用click函数。您可以使用change函数的<select>。

$("#proptype").change(function() {
    switch(this.value) {
    case 'Residential':
        $("#testres").show('slow');
        $("#testcom").hide('slow');
        $("#propunit").prop( "disabled", false );
        break;
    case 'Commercial':
        $("#testres").hide('slow');
        $("#testcom").show('slow');
        $("#propunit").prop( "disabled", true );
        break;
    default:
        $("#testres").hide('slow');
        $("#testcom").hide('slow');
        $("#propunit").prop( "disabled", false );
    }
});