Question

这里我每个li都有3个单选按钮，其中一个有选择下拉列表。如果用户选择了学校单选按钮，我需要在按钮提交时验证此下拉列表。但是这些类没有应用于选择下拉列表。

$(".retail-proceed-purchase").click(function() {
  var checkout_delivery_option = $(".cartcontinue .delivery_option").val();
  if (checkout_delivery_option == 'your_school') {
    var school = $('#school_list :selected').val();
    if (school == 'your_school') {
      $('.school_name').addClass("needsfilled");
      $('.school_name').attr("placeholder", emptyerror);
      return false;
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <input type="radio" id="school" name="delivery" value="your_school">
  <label for="school">
    <select class="school_name" id="school_list">
      <option label="Send to school" value="your_school">Send to school</option>
      <option value="your_school a">Send to school A</option>
      <option value="your_school b">Send to school B</option>
    </select>
  </label>
  <div class="check"></div>
</li>

Answer 1

试试这个

＆＃13;

$(".retail-proceed-purchase").click(function() {
  school_element = $("[type='radio'][value='your_school']")
  if(school_element.is(':checked')){
    school_list_element = school_element.parents("li").find("select.school_name")
    if(school_list_element.val() == "your_school"){
      alert('Please choose school name from list')
      school_list_element.addClass("needsfilled");
      school_list_element.attr("placeholder", "error occured");
    } else {
      alert('form submitted')
    }
  }else{
    alert('form submitted')
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="cartcontinue">
  <li>
    <input type="radio" id="school" name="delivery" value="your_school">
    <label for="school">
      <select class="school_name" id="school_list">
        <option label="Send to school" value="your_school">Send to school</option>
        <option value="your_school a">Send to school A</option>
        <option value="your_school b">Send to school B</option>
      </select>
    </label>
    <div class="check"></div>
  </li>

  <li>
    <input type="radio" id="school" name="delivery" value="your_college">
    Second radio button
    <div class="check"></div>
  </li>

</div>
<br><br>
<button class="retail-proceed-purchase">proceed</button>

＆＃13;

如何使用jQuery验证标签内的选择下拉列表？

1 个答案: