일부 자바 스크립트 기능 및 태그는 Chrome에서는 작동하지 않지만 Mozilla Firefox에서는 잘 작동합니다. 이것들을 도와주세요.

Question

여기 아래 주어진 코드 우리는 두 개의 DropDown.based 하나의 "속성 유형"두 번째 드롭 다운 "속성 하위 유형"을 변경해야합니다. Firefox에서는 작동하지만 Chrome에서는 작동하지 않습니다. 내가 속성 유형의 reidential을 선택하면

는 두 번째 드롭 다운 만 주거 값을 apear 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> 

자바 스크립트 기능

$(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 기능을 사용하지 마십시오. <select>의 change 기능을 사용합니다.

$("#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); 
    } 
});