Question

当您在下拉字段中选择值时，我有更改功能将显示或隐藏。我的改变功能工作正常。

但问题是当我点击保存时。变更的结构化领域不适用。它显示我的所有字段而不是已定义的字段。

好的，这是我的结构。

首先，我使用php foreach循环调用我的字段。例如：

 <?php foreach($options as $key_option=>$val_option):?>
         <!--INPUT BOX -->
            <?php if($val_option['id'] == '1081' || $val_option['id'] == '1082' || $val_option['id'] == '1083' || $val_option['id'] == '1168'):?>


           <div class="col-lg-3" id="<?php echo $val_option['id']; ?>">
            <label class="control-label"><?php echo $required_notice . $val_option['option'] ?><?php if(!empty($options_lang[$key][$key_option]->hint)):?><i class="icon-question-sign hint" data-hint="<?php echo $options_lang[$key][$key_option]->hint;?>"></i><?php endif;?></label>

            <div class="controls">
                <?php echo form_input('option' . $val_option['id'] . '_' . $key, set_value('option' . $val_option['id'] . '_' . $key, isset($estate['option' . $val_option['id'] . '_' . $key]) ? $estate['option' . $val_option['id'] . '_' . $key] : ''), 'class="form-control ' . $val_option['type'] . '" id="inputOption_' . $key . '_' . $val_option['id'] . '" placeholder="' . $val_option['option'] . '" ' . $required_text . ' ' . $max_length_text) ?>

            <?php if (!empty($options_lang[$key][$key_option]->prefix) || !empty($options_lang[$key][$key_option]->suffix)): ?>
                <?php echo $options_lang[$key][$key_option]->prefix . $options_lang[$key][$key_option]->suffix ?>
            <?php endif; ?>
            </div>
            </div>
        <?php endif;?>
    <?php endforeach;?>

这是怎么样的

然后就这样改变......

   <script type="text/javascript">
$(document).ready(function(){
$('#inputOption_1_2').on('change',function(){
if( $(this).val()==="Apartment" ){
    //Unitinfo
$('#20').show(); //bedroom
$('#19').show(); //bathroom
$('#1176').show(); //type of floorplan
$('#1063').show(); //no. of parking
$('#1177').show(); //Indoor Area
$('#1078').show(); //Balcony Area
$('#1179').show(); //Terrace Area
$('#1191').show(); //Price
$('#1192').show(); //REF#
$('#1193').show(); //RERA #
$('#1194').hide(); //Storey
$('#1195').hide(); //Plot Area
$('#1196').hide(); //Hotel Brand
$('#1197').hide(); //Built up Area
$('#1198').hide(); //Type of use
$('#1199').hide(); //Total Capacity
$('#1200').hide(); //No of kitchen
$('#1201').hide(); //No of dining
$('#1172').hide(); //Total Area
$('#1202').hide(); //Total Built up area
$('#1203').hide(); //Total Plot Area
$('#1071').hide(); //License Authority
$('#1211').hide(); //Nature of Business
$('#1212').hide(); //Total Price
$('#1204').hide(); //Area
//Decor
$('#1000').hide(); //Furnish
$('#1084').hide(); //Decoration
$('#1085').hide(); //Kitchen Type
$('#1087').hide(); //Floor Materials
$('#1086').hide(); //Window type
$('#1088').hide(); //Window Type
$('#1091').show(); //Smart System
$('#1089').hide(); //Private Garage
$('#1013').hide(); //Private Swimming Pool
$('#1006').show(); //Built in Wardrobe
$('#1138').hide(); //BBQ Area
$('#1205').hide(); //Bathroom Type
$('#1061').hide(); //Fitted
$('#1092').hide(); //Pantry
$('#1206').hide(); //Shared Meeting Room
$('#1207').hide(); //Shared Reception
//View
$('#1080').show(); //Main Direction
$('#1136').show(); //Master Bed
$('#1137').show(); //Other Bed
$('#1167').show(); //Kitchen Direction
$('#1166').show(); //Entrance
$('#1181').show(); //Primary view
$('#1182').show(); //View from Master bed
$('#1183').show(); //View from Other bed
$('#1168').show(); //Kitchen View
//Brand
$('#1140').show(); //Cooker   
$('#1141').show(); //Fridge
$('#1142').show(); //Washing Machine
$('#1143').show(); //Dryer
$('#1144').show(); //Dishwasher
$('#1145').show(); //Floor
$('#1146').show(); //Furniture
$('#1147').show(); //Bathroom
$('#1208').hide(); //Elevator
//Status
$('#1170').show(); //Rent Status
$('#1193').show(); //Tenancy Vacating Letter
$('#1095').show(); //Vacant on transfer
$('#1148').show(); //Rent Period
$('#1092').show(); //Expirty Date
$('#1093').show(); //Vacating Letter
$('#1094').show(); //Vacating Date
//Building Info
$('#1057').show(); //Building Name
$('#7').hide(); //Community
$('#1187').hide(); //Sub Community
$('#1186').show(); //Master Community
$('#1003').hide(); //Developer
$('#1044').hide(); //Year Completion
$('#1209').hide(); //Community Management 
$('#1169').show(); //Building Management
$('#1005').show(); //Annual Service Charge
$('#1101').hide(); //Cooling System
$('#1002').hide(); //Cooker Type
$('#1103').hide(); //Total Floors
$('#1104').hide(); //Building Heigts
$('#1105').hide(); //Building Color
$('#1106').hide(); //Ext Material
}
else if.....
</script>

制作onchange时会像这样

然后当我点击保存时，我会像这样。它显示像这样......

据说，即使单击“保存”，也会从第2张图像开始应用显示/隐藏字段的更改。

三江源

Answer 1

我的建议是，通过仅管理PHP层中的选项卡位置，从根本上简化设计。通过使用类从PHP层创建逻辑选项卡组来完成此操作。然后根据类名切换字段的可见性。这样可以更轻松地管理在切换选项卡时无法隐藏所有旧字段的标准错误。这也允许您根据需要多个标记需要在多个位置的字段。

例如：

<div class="col-lg-3 fields apartment decor" id="val_id">

然后在onchange事件中使用类来切换可见性。一旦if语句版本正常工作，就升级到switch语句。

$('#elem').change(function(e) {
   $('.fields').hide();  // hide all
   if ( $('#type).val() === "Apartment") {
      if ( $('#tab).val() === "Decor") {
        $('.apartment.decor').show();  // show apartment decor tab
      }
   }
});

保存后如何申请onchange show / hide

1 个答案: