javascript - 在动态生成的行中选择超过 5 次时如何禁用选项？

Question

以下是我的代码：

<tr class = "dynamicRow">
    <td class="dynamicStu"><b><bean:message key="label.student.code" />:</b>
                                        </td><td >
                                         <logic:present name="studentList">
                                            <html:select property="dgList[0].stuCreate"
                                            styleId="stuselect" onchange="setStudentLimit(this);">
                                                <html:option value="">
                                                    <bean:message key="label.student.code" />
                                                </html:option>
                                                <html:optionsCollection name="masStudentForm"
                                                    property="studentList" label="label" value="value" />
                                            </html:select>
                                        </logic:present> 
                                            </td>
                                        </div>
....
</tr>

在行的末尾，我有一个添加按钮，将动态添加此下拉列表。与此下拉列表一起，还有许多其他文本字段。

我的要求：当用户在下拉列表中选择相同的选项时，值超过 5 倍，这些值应该被禁用。应该发生在这个下拉列表的 Onchange() 上。请帮忙。

标签： javascripthtmljquerydynamicjquery-ui-multiselect

Answer 1

您首先需要使用获取您的选择的值，.val()然后您需要遍历表中的所有选择以查看该值被选择了多少次。如果值匹配，则增加计数，最后您可以检查计数值是否> 5显示警报或禁用该选项。

演示代码（带有虚拟数据）：

function setStudentLimit(el) {
  var intKeyCount = 0;
  var value = $(el).val(); //get that value
  //iterate through all selects
  $('.dynamicRow select').each(function() {
    //if value matches
    if ($(this).val() === value) {
      intKeyCount++; //increment
    }
  }); 
  if (intKeyCount > 5) {
    alert("you cannot choose again");
    //or disable that option
    //$(el).find("option:selected").prop('disabled',true);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border='1'>
 <tr>
 <th>Selects</th>
 </tr>
  <tr class="dynamicRow">

    <td>
      <select onchange="setStudentLimit(this);">
        <option value="">--Select---</option>
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
        <option value="4">Fourth</option>
      </select>
    </td>

  </tr>
  <tr class="dynamicRow">

    <td>
      <select onchange="setStudentLimit(this);">
        <option value="">--Select---</option>
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
        <option value="4">Fourth</option>
      </select>
    </td>

  </tr>
  <tr class="dynamicRow">

    <td>
      <select onchange="setStudentLimit(this);">
        <option value="">--Select---</option>
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
        <option value="4">Fourth</option>
      </select>
    </td>

  </tr>
  <tr class="dynamicRow">

    <td>
      <select onchange="setStudentLimit(this);">
        <option value="">--Select---</option>
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
        <option value="4">Fourth</option>
      </select>
    </td>

  </tr>
  <tr class="dynamicRow">

    <td>
      <select onchange="setStudentLimit(this);">
        <option value="">--Select---</option>
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
        <option value="4">Fourth</option>
      </select>
    </td>

  </tr>
  <tr class="dynamicRow">

    <td>
      <select onchange="setStudentLimit(this);">
        <option value="">--Select---</option>
        <option value="1">First</option>
        <option value="2">Second</option>
        <option value="3">Third</option>
        <option value="4">Fourth</option>
      </select>
    </td>

  </tr>
</table>