Question

这里给出下面代码我们创建两个DropDown.Based一个“属性类型”第二个下拉列表“属性子类型”应该更改。它在Firefox中工作正常但不在Chrome中。

当我选择属性类型reidential时，第二个下拉列表仅显示下拉列表中的住宅值。与商业房产类型相同

JSP CODE

<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的{{1}}功能。

<select>

一些Javascript函数和标记在Chrome中不起作用，但它在Mozilla Firefox中运行良好。帮我解决这些问题？

1 个答案: