Question

我有一个表，其中每个表单元格都是一个下拉菜单。每个菜单中都有不同数量的选项（基于mysql查询）。有什么方法可以检查每个下拉菜单的多个选项？总体目标是禁用数字为<= 0的那些菜单。

大多数示例使用HTML元素的ID。我没有每个下拉菜单的ID，因为每个时间页面根据某些数据库的值可以具有不同数量的菜单。他们都属于同一个阶级。现在，我只是想看看我是否最终可以得到一个正确的数字，但是看来我得到了页面上所有选项的总数。

$(document).ready(function() {
   $(".my_menu").each(check_length);
});

第一次尝试：

function check_length() {
  var sl_size = $("select > option").length;
  console.log("number: " + sl_size);
}

第二次尝试：

function check_length() {
  var sl_size = $(this).children.length;
  console.log("number: " + sl_size);
 }

第三次尝试：

function check_length() {
  var sl_size = $(this).length;
  console.log("number: " + sl_size);
 }

等等，任何帮助将不胜感激。

所要求的代码段：

for ($q=1; $q<= 4; $q++) { // it loops 4 times for four columns I need
 echo "<td>";
 echo "<select class='my_menu' >";
 echo "<option value=''>  </option>"; // just an empty option for a better look of the page

 foreach($array as $ar) { // compares values of array with some other variables
   if($ar["station"] == $my_station && $ar["experience"] >= 3) {
   echo "<option value='".$ar["worker"]."'>".$ar["worker"]."</option>";
   } // end of if statement
   else { echo ""; }
 } // end of foreach loop
 echo "</select></td>";
}

整个代码太大，无法显示。基本上每次比较值时-都会生成一个不同的名称列表。一切都很好。我想知道是否有机会获得每个列表的总数？我没有看到在这种布局下使用PHP或MySQL的机会，但是希望找到使用jQuery的解决方案。如果不存在解决方案，那就很好。

Answer 1

您的 check_length 带有两个参数：

idx：每个元素内部当前元素的索引
ele：当前元素

有关更多详细信息，您可以查看.each()

在您的迭代函数中，您需要找到选择元素，对于每个元素，您可以.map()（建立一个数组）的长度：

function check_length(idx, ele) {
    var sl_size = $(ele).find("select").map(function(idx, ele) {
        return ele.options.length;
    }).get();
    console.log("number: " + sl_size);
}
$(".my_menu").each(check_length)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="my_menu">
    <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>

    <select>
        <option value="volvo">Volvo</option>
    </select>
</div>

Answer 2

尝试此代码，这里是演示https://jsbin.com/virepis/edit?html,js,console,output

$(document).ready(function(){
  $(".table select").each(function(){
    if($('option', this).length <= 0) {
      $(this).attr('disabled', true);
    }
  });
});

感谢@Ashutosh，我正在使用他的html

Answer 3

根据您的要求，尝试进行模拟。尝试一下。它首先找到表，然后是每个td，然后是每个选择，然后计算该选择中的选项。 thnx

$('.table').find('td').each(function() {
    var optionCount =0;
    $(this).find('.selectpicker option').each(function() {
      ++optionCount;
    });
    console.log("optionCount:"+optionCount);
    
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>


<table class="table">
  
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td><select class="selectpicker">
              <option>row 1 op 1</option>
            </select></td>
      <td><select class="selectpicker">
              <option>row 1 op 1</option>
              <option>row 1 op 2</option>
            </select></td>
      <td>@<select class="selectpicker">
              <option>row 1 op 1</option>
              <option>row 1 op 2</option>
              <option>row 1 op 3</option>
            </select></td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td><select class="selectpicker">
              <option>row 2 op 1</option>
              <option>row 2 op 2</option>
              <option>row 2 op 3</option>
              <option>row 2 op 4</option>
            </select></td>
      <td><select class="selectpicker">
              <option>row 2 op 1</option>
              <option>row 2 op 2</option>
              <option>row 2 op 3</option>
              <option>row 2 op 4</option>
              <option>row 2 op 5</option>
            </select></td>
      <td>@<select class="selectpicker">
              <option>row 2 op 1</option>
              <option>row 2 op 2</option>
              <option>row 2 op 3</option>
              <option>row 2 op 4</option>
              <option>row 2 op 5</option>
              <option>row 2 op 6</option>
            </select></td>
    </tr>
    
   
    
  </tbody>
</table>

如何找到每个下拉菜单的长度？

3 个答案: