如何根据数据库中的值遍历多个选择和设置选项？

Question

我一直在处理我的项目，我的页面包含一个 table 多行，每行都有 select（下拉）。

到目前为止，每个 select 都有一个选项。该选项具有从数据库分配的值。

我想在页面加载后遍历页面上的所有 select。然后，如果 select 的值为 -1，我想将下拉列表默认为 NO，第二个选项应为 YES，值为 0。

这是我的 table 的样子：

1   8:00 AM - 8:30 AM    SELECT 
2   8:30 AM - 9:00 AM    SELECT 
3   9:00 AM - 9:30 AM    SELECT 
4   9:30 AM - 10:00 AM   SELECT

这是我的 HTML 代码：

<tr>
    <td>~(ORDER)</td>
    <td>~(TIMESLOT)</td>
    <td>
        <label>
            <select id="blockTime_~(recordID)" name="" class="dropBox">
                <option value="~(USER_ID)"></option>
            </select>
        </label>
    </td>
</tr>

我在 JQuery 中尝试过这样的事情：

<script>
    $j( document ).ready(function() {
        $j('.dropBox').each(function() {
            if($j(this).val() == "-1" || $j(this).val() == ""){
                $j('.dropBox').append('<option value="-1" selected="selected">No</option><option value="0">Yes</option>');
                }

                if($j(this).val() == "0" ){
                    $j('.dropBox').find("option").eq(0).hide();
                    $j('.dropBox').append('<option value="0" selected="selected">Yes</option><option value="-1">No</option>');
                }
            });
        });
    </script>

上面的代码在每一行中给了我很多是和否选项。那不是我想要的。使它起作用的另一种方法是什么？我是否应该通过每个 ID 或其他方式检查值？

$j = jQuery;

$j(document).ready(function() {
  $j('.dropBox').each(function() {
    if ($j(this).val() == "-1" || $j(this).val() == "") {
      $j('.dropBox').append('<option value="-1" selected="selected">No</option><option value="0">Yes</option>');
    }

    if ($j(this).val() == "0") {
      $j('.dropBox').find("option").eq(0).hide();
      $j('.dropBox').append('<option value="0" selected="selected">Yes</option><option value="-1">No</option>');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>~(ORDER)</td>
    <td>~(TIMESLOT)</td>
    <td>
      <label>
        <select id="blockTime_~(recordID)" name="" class="dropBox">
          <option value="0"></option>
        </select>
      </label>
    </td>
  </tr>
  <tr>
    <td>~(ORDER)</td>
    <td>~(TIMESLOT)</td>
    <td>
      <label>
        <select id="blockTime_~(recordID)" name="" class="dropBox">
          <option value="-1"></option>
        </select>
      </label>
    </td>
  </tr>
  <tr>
    <td>~(ORDER)</td>
    <td>~(TIMESLOT)</td>
    <td>
      <label>
        <select id="blockTime_~(recordID)" name="" class="dropBox">
          <option value="2"></option>
        </select>
      </label>
    </td>
  </tr>
</table>

Answer 1

您正在对所有 .dropBox 进行修改，而您只是打算在循环迭代的当前 .dropBox 上这样做。

对于 .each 循环，回调将迭代器索引作为第一个参数，将元素作为第二个参数。上下文也是您似乎已经正确但后来没有使用的元素？

$j = jQuery;

$j(document).ready(function() {
  $j('.dropBox').each(function(index, dropBox) {
    // Instead of appending options to every .dropBox, only do it for this one.
    var $select = $j(this); // or $j(dropBox);
    var val     = $select.val();
    if (val == "-1" || val == "") {
      $select.append('<option value="-1" selected="selected">No</option><option value="0">Yes</option>');
    } else if (val == "0") {
      $select.find("option").eq(0).remove(); // You can't hide an option. I am presuming you wanted the first option removed?
      $select.append('<option value="0" selected="selected">Yes</option><option value="-1">No</option>');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>~(ORDER)</td>
    <td>~(TIMESLOT)</td>
    <td>
      <label>
        <select id="blockTime_~(recordID)" name="" class="dropBox">
          <option value="0"></option>
        </select>
      </label>
    </td>
  </tr>
  <tr>
    <td>~(ORDER)</td>
    <td>~(TIMESLOT)</td>
    <td>
      <label>
        <select id="blockTime_~(recordID)" name="" class="dropBox">
          <option value="-1"></option>
        </select>
      </label>
    </td>
  </tr>
  <tr>
    <td>~(ORDER)</td>
    <td>~(TIMESLOT)</td>
    <td>
      <label>
        <select id="blockTime_~(recordID)" name="" class="dropBox">
          <option value="2"></option>
        </select>
      </label>
    </td>
  </tr>
</table>

如何根据数据库中的值遍历多个选择和设置选项？

How to iterate through multiple selects and set option based on the value from DB?

javascript

jquery

html-select