Question

<label>Project Type </label>
    <div>
    <select name="category" id="category" class="form-control ">
        <option value="">Select Project Type</option>
        <option value="Independent_House">Independent House</option>
        <option value="Duplex_House">Duplex House</option>
        <option value="Pent_House">Pent House</option>
    </select>
    </div>

<div  class="cato" id="category_Independent_House" style="display:none">    
  <input type="button" id="addindependant" value="Add Property" />          
    <div id="cato_Independent_House">
      <div class="form-group">                  
        <label>Bed Rooms</label><label>Bath Rooms</label> 
      </div>
    </div>
  </div>
  <div  class="cato" id="category_Duplex_House" style="display:none">
  <input type="button" id="addduplex" value="Add Property" />   
    <div id="cato_Duplex_House">
      <div class="form-group">                  
        <label >Bed Rooms</label><label>Bath Rooms</label>
      </div>                        
    </div>
  </div>
  <div  class="cato" id="category_Pent_House" style="display:none">
  <input type="button" id="addpenthouse value="Add Property" />
    <div id="cato_Pent_House">
      <div class="form-group">                  
        <label >Bed Rooms</label><label>Bath Rooms</label>
       </div>
    </div>
        </div>

   <script type="text/javascript">
  js(function() {
   js('#addindependant').click(function(e){
   js('#cato_Independent_House').append('<div class="form-group submenu">
              <div ><select name="rooms[]" >
                    <option value="1">1BHK</option>
                    <option value="2">2BHK</option>
                    <option value="3">3BHK</option> 
                    </select>
               </div>
               <div><select name="toilets[]">
                    <option value="1">1T</option>
                    <option value="2">2T</option>
                    <option value="3">3T</option>
                    </select>
               </div> 
               </div>');
          });
  js('#addduplex').click(function(e){
   js('#cato_Duplex_House').append('<div class="form-group submenu">
              <div ><select name="rooms[]" >
                    <option value="1">1BHK</option>
                    <option value="2">2BHK</option>
                    <option value="3">3BHK</option> 
                    </select>
               </div>
               <div><select name="toilets[]">
                    <option value="1">1T</option>
                    <option value="2">2T</option>
                    <option value="3">3T</option>
                    </select>
               </div> 
               </div>');
       });
   js('#addpenthouse').click(function(e){
    js('#category_Pent_House').append('<div class="form-group submenu">
              <div ><select name="rooms[]" >
                    <option value="1">1BHK</option>
                    <option value="2">2BHK</option>
                    <option value="3">3BHK</option> 
                    </select>
               </div>
               <div><select name="toilets[]">
                    <option value="1">1T</option>
                    <option value="2">2T</option>
                    <option value="3">3T</option>
                    </select>
               </div> 
               </div>');
          });
     });
      js(document).ready(function(){    
        js('#category').change(function () {
           var selection = js(this).val();
           js('#category_'+selection).show('slow');
             });
         });
     </script>

这是我的代码。当我根据所选类别选择类别时，div cato_Independent_House cato_Duplex_House和category_Pent_House会附加到各自的类别中。

首先考虑从下拉菜单中选择independant house，然后点击按钮将其cato_Independent_House附加到ID为id="category_Independent_House"的div。之后duplex house为从下拉列表中选择它的相应“cato_Duplex_House”会在点击按钮后附加到div id="cato_Duplex_House"。

但是当我返回并选择Independant house时，它必须不会显示之前选择的div，直到单击该按钮。但是这里div已经显示，即使我回去时按钮没有被点击。前一个菜单应该只在点击按钮时显示它的div。以前，当选择其他选项时，前面的div必须为空或删除。如何这样做？

Answer 1

<强> JS

js(document).ready(function(){ 
        js('#category').change(function () {
           var selection = js(this).val();
            js('.cato').each(function() {
                console.log(js('.cato'));
                if(js(this).attr('data-visible') != "true") {
                    js(this).hide();
                }
            });
           js('#category_'+selection).show('slow');
             });
         js('.addProperty').click(function(){
             js(this).parents('.cato').attr('data-visible','true');
         });
         });

<强> HTML

<input type="button" id="addduplex" value="Add Property"  class="addProperty" />

将class addProperty添加到所有添加属性输入

工作JsFiddle链接。我猜这就是你想要的

Answer 2

您应该使用jquery hide方法隐藏其他div，具体取决于您选择的那个：

js(document).ready(function(){ 
    js('#category').change(function () { 
      var selection = js(this).val(); 
      js('#category_'+selection).show('slow'); 
      if(selection=="Independent_House"){
          js('#cato_Duplex_House').hide();
          js('#cato_Pent_House').hide();
      }else if(...){
          {otherCases}
    });});

如果你想清除每个div的输入选择，你可以这样做：

js("#input_controller_id_to_clear")[0].selectedIndex = -1;

点击图片即可删除所有其他div

2 个答案: