选择字段清除值但忽略第一个选项

时间：2017-07-20 15:19:35

标签： jquery

我在选择器上使用^来查找具有以form1_product开头的id的所有选项，以隐藏所有值并清除它们。然后切换到显示正确的选择选项。

这一切都有效，但我的问题是

如何忽略选项列表中的第一个选项，因为它当前会删除所有值。 

$(document).ready(function() {

  toggleFields();

  $("#form1_segment").change(function() {
    toggleFields();
  });

  function toggleFields() {

    $("[id^=form1_product]").hide().val(null);

    switch ($("#form1_segment").val()) {
      case "Food Service":
        $("#form1_product").show();
        break;
      case "Building Care":
        $("#form1_product_bc").show();
        break;
      case "Industry":
        $("#form1_product_in").show();
        break;
      case "Health Care":
        $("#form1_product_hc").show();
        break;
      case "Automotive":
        $("#form1_product_auto").show();
        break;
      case "Aerospace":
        $("#form1_product_aero").show();
    }
  }
});
div {
  display: block;
  margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1_contact" class="contact-form" action="/en-us/contact" method="post">
  <div>
    <input id="form1_name" name="name" class="contact-form__input" placeholder="Full Name" type="text" required="required" />
  </div>
  <div>
    <input id="form1_email" name="email" class="contact-form__input" placeholder="Email address" type="email" required="required" />
  </div>
  <div class="split-form">
    <label for="form1_segment">Segment</label>
    <select id="form1_segment" name="segment" class="test">
      <option value="Select a Segment">Select a Segment</option>
      <option value="Food Service">Food Service</option>
      <option value="Building Care">Building Care</option>
      <option value="Industry">Industry</option>
      <option value="Health Care">Health Care</option>
      <option value="Automotive">Automotive</option>
      <option value="Aerospace">Aerospace</option>
    </select>
  </div>
  <div class="split-form last">
    <label for="form1_product">Product</label>
    <select id="form1_product" name="product" class="test">
      <option value="Select a product">Select a product</option>
      <option value="S.U.D.S.® Single Use Dispensing System">S.U.D.S.® Single Use Dispensing System</option>
      <option value="Chix® SC Foodservice Towels">Chix® SC Foodservice Towels</option>
      <option value="Chix® SC Foodservice Towels">Chix® SC Foodservice Towels</option>
      <option value="Chix® Pro-Quat®">Chix® Pro-Quat®</option>
      <option value="Chix® Pro-Quat®">Chix® Pro-Quat®</option>
      <option value="Chix® Pro-Quat®">Chix® Pro-Quat®</option>
      <option value="Chix® Pro-Chlor®">Chix® Pro-Chlor®</option>
      <option value="Chix® Microfiber Light Cloths">Chix® Microfiber Light Cloths</option>
      <option value="Chix® Plus with Microban">Chix® Plus with Microban</option>
      <option value="Chix® Towels with Microban">Chix® Towels with Microban</option>
      <option value="Chix® Towels">Chix® Towels</option>
      <option value="Chix® Plus Sanitizing">Chix® Plus Sanitizing</option>
      <option value="Chix® Soft Cloth">Chix® Soft Cloth</option>
      <option value="Chix® Tough">Chix® Tough</option>
      <option value="Chix® All Day™">Chix® All Day™</option>
      <option value="Chix® Wet Wipes">Chix® Wet Wipes</option>
      <option value="Chix® Competitive Wet Wipes">Chix® Competitive Wet Wipes</option>
      <option value="Chix® Economy Towels">Chix® Economy Towels</option>
      <option value="Chix® 3000">Chix® 3000</option>
      <option value="Quix® Pretreated Towels">Quix® Pretreated Towels</option>
      <option value="Chix® Apron">Chix® Apron</option>
      <option value="Worxwell®">Worxwell®</option>
    </select>
    <select id="form1_product_bc" name="product_bc" class="test">
      <option value="Select a product">Select a product</option>
      <option value="Dusty™ High Performance Dust Cloth">Dusty™ High Performance Dust Cloth</option>
      <option value="Masslinn® Heavy Duty Dust Cloth">Masslinn® Heavy Duty Dust Cloth</option>
      <option value="S.U.D.S.® Single Use Dispensing System">S.U.D.S.® Single Use Dispensing System</option>
      <option value="Masslinn® Medium Duty Dust Cloth">Masslinn® Medium Duty Dust Cloth</option>
      <option value="Masslinn® Light Duty Dust Cloth">Masslinn® Light Duty Dust Cloth</option>
      <option value="Economy Duster">Economy Duster</option>
      <option value="Masslinn Dusting Tools">Masslinn Dusting Tools</option>
    </select>
    <select id="form1_product_in" name="product_in" class="test">
      <option value="Select a product">Select a product</option>
      <option value="Durawipe® Heavy Duty Shop Towel">Durawipe® Heavy Duty Shop Towel</option>
    </select>
    <select id="form1_product_hc" name="product_hc" class="test">
      <option value="Select a product">Select a product</option>
      <option value="Worxwell® Towels">Worxwell® Towels</option>
      <option value="Soft Cloth Patient Wipes">Soft Cloth Patient Wipes</option>
      <option value="Professional Series">Professional Series</option>
      <option value="Dwell™ Disinfectant Compatible Healthcare Towels">Dwell™ Disinfectant Compatible Healthcare Towels</option>
      <option value="Dusty™ High Performance Dust Cloths">Dusty™ High Performance Dust Cloths</option>
    </select>
    <select id="form1_product_auto" name="product_auto" class="test">
      <option value="No products available">No products available</option>
    </select>
    <select id="form1_product_aero" name="product_aero" class="test">
      <option value="No products available">No products available</option>
    </select>
  </div>
  <div>
    <textarea id="form1_message" name="message" class="contact-form__input  contact-form__textarea" cols="30" rows="4" placeholder="Message"></textarea>
  </div>
  <div>
    <input id="form1_submit" name="submit" class="btn  btn__round  subform__button" value="Send Message" type="submit" />
  </div>
</form>

1 个答案:

答案 0 :(得分：1)

将value设置为null会使其不会选择任何选项，而不是第一个选项（其值为＆＃34;选择产品＆＃34;或＆＃34;没有可用的产品＆＃34;）。我想你实际上想要在每个select上选择第一个选项。

以下代码如前所述隐藏select，取消选择所有选项，然后选择第一个选项。还有其他方法可以做到这一点，这就是我头脑中发生的事情。

＆＃13;
＆＃13; 
$(document).ready(function() {

  toggleFields();

  $("#form1_segment").change(function() {
    toggleFields();
  });

  function toggleFields() {

    $("[id^=form1_product]").hide().find('option').prop('selected', false).first().prop('selected', true);

    switch ($("#form1_segment").val()) {
      case "Food Service":
        $("#form1_product").show();
        break;
      case "Building Care":
        $("#form1_product_bc").show();
        break;
      case "Industry":
        $("#form1_product_in").show();
        break;
      case "Health Care":
        $("#form1_product_hc").show();
        break;
      case "Automotive":
        $("#form1_product_auto").show();
        break;
      case "Aerospace":
        $("#form1_product_aero").show();
    }
  }
});
＆＃13; 
div {
  display: block;
  margin-bottom: 20px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1_contact" class="contact-form" action="/en-us/contact" method="post">
  <div>
    <input id="form1_name" name="name" class="contact-form__input" placeholder="Full Name" type="text" required="required" />
  </div>
  <div>
    <input id="form1_email" name="email" class="contact-form__input" placeholder="Email address" type="email" required="required" />
  </div>
  <div class="split-form">
    <label for="form1_segment">Segment</label>
    <select id="form1_segment" name="segment" class="test">
      <option value="Select a Segment">Select a Segment</option>
      <option value="Food Service">Food Service</option>
      <option value="Building Care">Building Care</option>
      <option value="Industry">Industry</option>
      <option value="Health Care">Health Care</option>
      <option value="Automotive">Automotive</option>
      <option value="Aerospace">Aerospace</option>
    </select>
  </div>
  <div class="split-form last">
    <label for="form1_product">Product</label>
    <select id="form1_product" name="product" class="test">
      <option value="Select a product">Select a product</option>
      <option value="S.U.D.S.® Single Use Dispensing System">S.U.D.S.® Single Use Dispensing System</option>
      <option value="Chix® SC Foodservice Towels">Chix® SC Foodservice Towels</option>
      <option value="Chix® SC Foodservice Towels">Chix® SC Foodservice Towels</option>
      <option value="Chix® Pro-Quat®">Chix® Pro-Quat®</option>
      <option value="Chix® Pro-Quat®">Chix® Pro-Quat®</option>
      <option value="Chix® Pro-Quat®">Chix® Pro-Quat®</option>
      <option value="Chix® Pro-Chlor®">Chix® Pro-Chlor®</option>
      <option value="Chix® Microfiber Light Cloths">Chix® Microfiber Light Cloths</option>
      <option value="Chix® Plus with Microban">Chix® Plus with Microban</option>
      <option value="Chix® Towels with Microban">Chix® Towels with Microban</option>
      <option value="Chix® Towels">Chix® Towels</option>
      <option value="Chix® Plus Sanitizing">Chix® Plus Sanitizing</option>
      <option value="Chix® Soft Cloth">Chix® Soft Cloth</option>
      <option value="Chix® Tough">Chix® Tough</option>
      <option value="Chix® All Day™">Chix® All Day™</option>
      <option value="Chix® Wet Wipes">Chix® Wet Wipes</option>
      <option value="Chix® Competitive Wet Wipes">Chix® Competitive Wet Wipes</option>
      <option value="Chix® Economy Towels">Chix® Economy Towels</option>
      <option value="Chix® 3000">Chix® 3000</option>
      <option value="Quix® Pretreated Towels">Quix® Pretreated Towels</option>
      <option value="Chix® Apron">Chix® Apron</option>
      <option value="Worxwell®">Worxwell®</option>
    </select>
    <select id="form1_product_bc" name="product_bc" class="test">
      <option value="Select a product">Select a product</option>
      <option value="Dusty™ High Performance Dust Cloth">Dusty™ High Performance Dust Cloth</option>
      <option value="Masslinn® Heavy Duty Dust Cloth">Masslinn® Heavy Duty Dust Cloth</option>
      <option value="S.U.D.S.® Single Use Dispensing System">S.U.D.S.® Single Use Dispensing System</option>
      <option value="Masslinn® Medium Duty Dust Cloth">Masslinn® Medium Duty Dust Cloth</option>
      <option value="Masslinn® Light Duty Dust Cloth">Masslinn® Light Duty Dust Cloth</option>
      <option value="Economy Duster">Economy Duster</option>
      <option value="Masslinn Dusting Tools">Masslinn Dusting Tools</option>
    </select>
    <select id="form1_product_in" name="product_in" class="test">
      <option value="Select a product">Select a product</option>
      <option value="Durawipe® Heavy Duty Shop Towel">Durawipe® Heavy Duty Shop Towel</option>
    </select>
    <select id="form1_product_hc" name="product_hc" class="test">
      <option value="Select a product">Select a product</option>
      <option value="Worxwell® Towels">Worxwell® Towels</option>
      <option value="Soft Cloth Patient Wipes">Soft Cloth Patient Wipes</option>
      <option value="Professional Series">Professional Series</option>
      <option value="Dwell™ Disinfectant Compatible Healthcare Towels">Dwell™ Disinfectant Compatible Healthcare Towels</option>
      <option value="Dusty™ High Performance Dust Cloths">Dusty™ High Performance Dust Cloths</option>
    </select>
    <select id="form1_product_auto" name="product_auto" class="test">
      <option value="No products available">No products available</option>
    </select>
    <select id="form1_product_aero" name="product_aero" class="test">
      <option value="No products available">No products available</option>
    </select>
  </div>
  <div>
    <textarea id="form1_message" name="message" class="contact-form__input  contact-form__textarea" cols="30" rows="4" placeholder="Message"></textarea>
  </div>
  <div>
    <input id="form1_submit" name="submit" class="btn  btn__round  subform__button" value="Send Message" type="submit" />
  </div>
</form>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题