Question

我有3个选择列表，有很多选项我不知道任何JS代码这是我的HTML

<fieldset id="basic_data">
                <legend>Basic Data :</legend>
                    <h3 class="floatright">Type</h3>
                    <select class="" id="choosebuilding" name="choosebuilding">
                        <option value="flat">flat</option>
                        <option value="villa">villa</option>
                        <option value="3">commercial</option>
                        <option value="4">land</option>
                    </select>
                        <div class="clear"></div>
                    <h3 class="floatright">Payment</h3>
                    <select class="" id="choosecity" name="choosetype">
                        <option value="1">cash</option>
                        <option value="2">installement</option>
                        <option value="3">rent</option>
                        <option value="4">furnished</option>
                    </select>
                        <div class="clear"></div>
                    <h3 class="floatright">Choose City</h3>
                    <select class="" id="choosecity" name="choosecity">
                        <option value="1">Alrehab</option>
                        <option value="2">Settlement</option>
                        <option value="3">Madinty</option>
                    </select>
                </fieldset><!-- end field set Basic Data -->

我有很多会显示依赖性的字段集像这样

- 地址数据如果Alrehab + Madinty类型持平 -

- 地址数据IF Alrehab + Madinty型别墅 -

- 地址数据全部商业 -

- 地址数据结算类型平或或别墅 -

- 现金Alrehab + Madinty -

- 货币现金结算 -

- Credite Alrehab + Madinty -

- 信用结算 -

- 全部租赁 -

- 装饰全部 -

我相信我有很多案例

我把所有必要的字段放在我的html中，然后就这样评论。

我想显示已使用的字段部分并隐藏其他

我的隐藏代码示例

<fieldset id="furnished">
                    <legend>Furnished - All :</legend>
                        <h3 class="floatright">coast</h3>
                        <input name="rental_sum" class="input100" />

                        <h3 class="floatright">dialy</h3>
                        <input name="daily_rent" class="input100" />

                        <h3 class="floatright">insurance</h3>
                        <input name="insurance" class="input100" />

                        <h3 class="floatright">staff</h3>
                        <input name="annual_increas" class="input100" />

                        <h3 class="floatright">less</h3>
                        <input name="less_rent_time" class="input100" />

                        <h3 class="floatright">when ready</h3>
                        <input name="" class="input100" />

                    </fieldset><!-- end field set 11 -->

Answer 1

看起来是jQuery show（），hide（）和一些逻辑的好地方。

function updateShown(){
//First, hide everything that may have been previously shown.
  $("#furnished").hide();

//Next, start showing things based on user's selections
  //if ("Alrehab" or "Madinty") and ("flat" or "villa"), show addressData
  if ($("#choosecity").val() == 1 || $("#choosecity").val() == 3)
          && ($("#choosebuilding").val() == "flat" || $("#choosebuilding").val() == "villa") ){
      $("#addressData").show();
  }
}

将updateShown()添加到选择“.change事件中，您应该设置。

显示和隐藏多个div取决于3个选择框值

1 个答案: