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

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 -->

而且我有许多显示依赖关系的字段集 像这样

-- 地址数据 IF Alrehab + Madinty type flat --

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

-- 地址数据全部商用--

-- 地址数据结算类型flat OR 和别墅--

-- 现金 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 事件中，您应该已经设置好了。