选择一个选项并默认自动选择其他表单中的多项选项

时间:2018-04-10 23:18:07

标签: javascript html css forms

我很难解释自己。所以我将按步骤设置我正在寻找的东西。

  1. 首先选择你想要的东西。
  2. 在后台,当您选择其他选项时,例如组织1个卧室和1个浴室来抓取它,默认情况下将其选择为其他形式。因此,当您插入了解我的价格时,它会显示每周,每两周和每月服务的费用。
  3. 我不知道该找什么,因为我自己甚至不能直接解释它。我希望我给出的例子帮助你理解我在寻找什么?

    .button {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        width: 100%;
    }
    <fieldset>
       
          <hr>
          
          <!--Weekly form-->
          
        <legend>On going service</legend>
          <select >
          <option value="">Select day of the week</option>
          <option value="10">Monday</option>
          <option value="10">Tuesday</option>
          <option value="10">Wednesday</option>
           <option value="10">Thursday</option>
          <option value="10">Friday</option>
          </select>
          
    
          
          <select>
          <option value="">Organize a:</option>
          <option value="10">1 bedroom 1 bathroom home</option>
          <option value="20">2 bedroom 1 bathroom home</option>
          <option value="30">2 bedroom 2 bathroom home</option>
          </select>
             
         </fieldset>
              
              <div style="display:none;">
              
          <hr>     
          
          <!--Biweekly form-->
          
          <fieldset>
        <legend>Biweekly</legend>
          <select >
          <option value="">Select day of the week</option>
          <option value="100">Monday</option>
          <option value="100">Tuesday</option>
          <option value="100">Wednesday</option>
           <option value="100">Thursday</option>
          <option value="100">Friday</option>
          </select>
    
          
          <select>
          <option value="">Organize a:</option>
          <option value="100">1 bedroom 1 bathroom home</option>
          <option value="200">2 bedroom 1 bathroom home</option>
          <option value="300">2 bedroom 2 bathroom home</option>
          </select>
          </fieldset>
          
          
            
          <hr>
          
          <!-- Monthly form-->
          
          <fieldset>
        <legend>Monthly</legend>
          <select >
          <option value="">Select day of the week</option>
          <option value="1000">Monday</option>
          <option value="1000">Tuesday</option>
          <option value="1000">Wednesday</option>
           <option value="1000">Thursday</option>
          <option value="1000">Friday</option>
          </select>
    
          
          <select>
          <option value="">Organize a:</option>
          <option value="1000">1 bedroom 1 bathroom home</option>
          <option value="2000">2 bedroom 1 bathroom home</option>
          <option value="3000">2 bedroom 2 bathroom home</option>
          </select>
          </fieldset>
          </div>
          
          <!--After everything is selcted-->
          
          <button class="button">Book weekly</button> <div align="center">$PRICE</div>
          <br>
          <button class="button">Book biweekly</button> <div align="center">$PRICE</div>
          <br>
          <button class="button">Book monthly</button> <div align="center">$PRICE</div>

0 个答案:

没有答案