使用jQuery编辑不隐藏div的记录

时间:2019-07-28 18:58:53

标签: javascript jquery html

如果我从下拉列表中选择值之一,则添加一条记录时,某些div会隐藏,而在插入数据时,数据会成功插入数据库中。

这里的问题是,在编辑默认情况下插入的同一条记录时,它显示的是我添加的字段。

例如:当用户从下拉列表中选择开放地块时,我将隐藏这两个div的total_bathrooms和car_parking,但是当我编辑下拉列表中的值是否为开放地块时,它不应显示这两个div的total_bathrooms和car_parking,但在此显示。

插入记录:

 <select class="custom-select-box" name="property_type" id="property_type"required>
                                <option>Property Type</option>
                                <option value="1-BHK">1 BHK</option>
                                <option value="2-BHK">2 BHK</option>
                                <option value="3-BHK">3 BHK</option>
                                <option value="Villas-Duplex">Villas-Duplex</option>
                                <option value="Houses">Houses</option>
                                <option value="Open-Plots">Open Lands</option>
                            </select>


<div class="form-group col-md-4 col-sm-6 col-xs-12" id="total_bathrooms">
                                <div class="field-label">Total Bathrooms</div>
                                <input type="text" name="total_bathrooms" id="total_bathrooms"  placeholder="Total Bathrooms"  maxnumber="1"><span id="errmsgs"></span>
                        </div>

                        <div class="form-group col-md-4 col-sm-6 col-xs-12" id="car_parking">
                            <div class="field-label">Car Parking</div>
                            <label class="radio-inline">
                                <input type="radio" name="car_parking" value="Available">Available
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="car_parking" value="Unavailable" >Unavailable
                            </label>
                        </div>

jquery:

$(document).ready(function(){
$('#property_type').on('change', function() {
  if ( this.value == 'Open-Plots')
  {
    $("#total_bathrooms").hide();
    $("#car_parking").hide();
  }
  else
  {
    $("#total_bathrooms").show();
    $("#car_parking").show();
  }
});
});

编辑记录:

<select class="custom-select-box" name="property_type" required="" id="property_type">
                                    <option value="1-BHK">1 BHK</option>
                                    <option value="2-BHK">2 BHK</option>
                                    <option value="3-BHK">3 BHK</option>
                                    <option value="Villas-Duplex">Villas-Duplex</option>
                                    <option value="Houses">Houses</option>
                                    <option value="Open-Plots" selected="selected">Open Lands</option>
                                </select>
                  <div class="form-group col-md-4 col-sm-6 col-xs-12" id="total_bathrooms">
                                <div class="field-label">Total Bathrooms</div>
                                <input type="text" name="total_bathrooms" id="total_bathrooms" value="" maxnumber="1" required=""><span id="errmsgss"></span>
                            </div>
<div class="form-group col-md-4 col-sm-6 col-xs-12" id="car_parking">
                                <div class="field-label">Car Parking</div>
                                <input type="radio" name="car_parking" value="Available">Available
                                <input type="radio" name="car_parking" value="Unavailable">Unavailable
                            </div>

jquery在添加和编辑方面都是相同的

1 个答案:

答案 0 :(得分:0)

还要检查页面何时加载。您当前的代码仅检查更改选择列表的时间。

 $(document).ready(function(){
    showHide();
    $('#property_type').on('change', function() {
       showHide();
    });

    function showHide(){
       if ( $("#property_type").val() == 'Open-Plots')
       {
          $("#total_bathrooms").hide();
          $("#car_parking").hide();
       }
       else
       {
          $("#total_bathrooms").show();
          $("#car_parking").show();
       }
     }
});