2

我在验证表单时遇到问题。我有超过 6 个不同的下拉选择对象。这里以前两个为例：

<table id="ProjectTable">
<tr><td>
<select​​​​​​​​​​​​​​ ​​​id="selected1" selectedIndex=0>
    <option></option>
    <option>o1</option>
    <option>o2</option>
    <option>o3</option>
    <option>o4</option>
</select>
</td>
<td>
<select id="selected2" selectedIndex=0>
    <option></option>
    <option>10</option>
    <option>12</option>
    <option>13</option>
    <option>14</option>
</select>
</td></tr></table>
​&lt;button type="button">Submit</button>​​​​​​​​​​​​​​​​​​​​​​​​​

我想做的是验证下拉选择，如果用户选择空选项（默认是第一个选项），然后点击提交。然后它会收到错误并通知用户他们必须在每个下拉选项中选择一个选项。六个下拉选择 ID 是动态生成的。我知道我可以使用 jQuery .each() 函数来循环选择元素。

谁能帮我解决这个问题？谢谢

4

3 回答 3

3 
// filter over empty selects
// function will jQuery object
function checkEmptySelect() {
    return $('select').filter(function() {
        // return those selects, with no value selected
        return !this.value.trim();
    });
}

// bind change event to select box
$('select[id^=selected]').on('change', function() {
    // keep reference of returned jQuery object
    var unselect = checkEmptySelect();
    // checking is any non-selected select box exists
    if (unselect.length) {
        unselect.addClass('error'); // if exists then add error class
    } else {  // if no non-selected found
        $('select[id^=selected]').removeClass('error'); // remove error class
    }
})​;

演示

于 2012-08-01T04:35:17.107 回答
1

见演示

$('#form').submit(function () {
    var valid = true;

    $('select', this).each(function (e) {
        if (!$(this).val()) valid = false;
    });

    if (!valid) {
        $('.error').show();
        return false;
    }
});​
于 2012-08-01T04:34:57.657 回答
1

在这里，我为上述验证问题完成了完整的 bin。

演示： http ://codebins.com/bin/4ldqp94

HTML：

<form id="frm1">
  <div class="error">
  </div>
  <table id="ProjectTable">
    <tr>
      <td>
        <select id="selected1" selectedIndex=0>
          <option>
          </option>
          <option>
            O1
          </option>
          <option>
            O2
          </option>
          <option>
            O3
          </option>
          <option>
            O4
          </option>
        </select>
      </td>
      <td>
        <select id="selected2" selectedIndex=0>
          <option>
          </option>
          <option>
            10
          </option>
          <option>
            12
          </option>
          <option>
            13
          </option>
          <option>
            14
          </option>
        </select>
      </td>
      <td>
        <select id="selected3" selectedIndex=0>
          <option>
          </option>
          <option>
            opt1
          </option>
          <option>
            opt2
          </option>
          <option>
            opt3
          </option>
          <option>
            opt4
          </option>
        </select>

      </td>
    </tr>
  </table>
  <button type="submit">
    Submit
  </button>
</form>

jQuery：

$(function() {
    $("form#frm1").submit(function() {
        var isValid = true;
        $("select").each(function() {
            $(".error").html();
            if ($(this).val() == "") {
                $(".error").html("Please selct value for empty dropdown..!");
                isValid = false;
            }
        });
        return isValid;
    });
});

CSS：

.error{
  color:#f81122;
  padding:5px;
}

演示： http ://codebins.com/bin/4ldqp94

于 2012-08-01T05:07:23.073 回答