Nice-Select插件仅选择HTML表中的第一个元素

发布于 2025-02-05 04:51:24 字数 2455 浏览 4 评论 0原文

<html lang="en">
<head>
  <title>Document</title>
  <link rel='stylesheet' href='./assets/libraries/nice-select/css/nice-select2.css' />
</head>
<body>
  <table>
    <tr>
      <th>S/N</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Gender</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Fred</td>
      <td>Freeman</td>
      <td>
        <select name="gender">
          <option value="female">Female</option>
          <option value="male">Male</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Bruce</td>
      <td>Barner</td>
      <td>
        <select name="gender">
          <option value="female">Female</option>
          <option value="male">Male</option>
        </select>
      </td>
    </tr>
  </table>

  <script src='./assets/libraries/nice-select/js/nice-select2.js'></script>
  <script src='./assets/js/app.js'></script>

  <script>
    NiceSelect.bind(document.querySelector("select")); // This styles only the first select element
  </script>
</body>
</html>

我在 docs 建议建议的建议中，但只有第一个选择是被设计的，第二个选择就像没有样式的普通选择一样。

我尝试选择更具体的

<script>
    NiceSelect.bind(document.querySelector("table td select"));
</script>

不起作用的

具体性，我也尝试过这样的每个桌子行循环，

<script>
    const tableRows = Array.from(document.querySelectorAll('tr'));
    tableRows.forEach((row) => {
      NiceSelect.bind(row.querySelector('select'));
    });
</script>

但这给出了一个错误

Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')
    at d (nice-select2.js:1:1008)
    at new p (nice-select2.js:1:1377)
    at Module.u (nice-select2.js:1:1575)
    at (index):206:18
    at Array.forEach (<anonymous>)
    at (index):205:49

原文

I have this select element in a table I am trying I am trying to style with the nice-select plugin.

<html lang="en">
<head>
  <title>Document</title>
  <link rel='stylesheet' href='./assets/libraries/nice-select/css/nice-select2.css' />
</head>
<body>
  <table>
    <tr>
      <th>S/N</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Gender</th>
    </tr>
    <tr>
      <td>1</td>
      <td>Fred</td>
      <td>Freeman</td>
      <td>
        <select name="gender">
          <option value="female">Female</option>
          <option value="male">Male</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Bruce</td>
      <td>Barner</td>
      <td>
        <select name="gender">
          <option value="female">Female</option>
          <option value="male">Male</option>
        </select>
      </td>
    </tr>
  </table>

  <script src='./assets/libraries/nice-select/js/nice-select2.js'></script>
  <script src='./assets/js/app.js'></script>

  <script>
    NiceSelect.bind(document.querySelector("select")); // This styles only the first select element
  </script>
</body>
</html>

I added the CSS link at the top and the JS script at the bottom as the docs suggested, but only the first select is being styled, the second one is just like the normal select with no style.

I tried selecting more specific

<script>
    NiceSelect.bind(document.querySelector("table td select"));
</script>

That did not work

I also tried looping through each table row like this

<script>
    const tableRows = Array.from(document.querySelectorAll('tr'));
    tableRows.forEach((row) => {
      NiceSelect.bind(row.querySelector('select'));
    });
</script>

But this gave an error

Uncaught TypeError: Cannot read properties of null (reading 'getAttribute')
    at d (nice-select2.js:1:1008)
    at new p (nice-select2.js:1:1377)
    at Module.u (nice-select2.js:1:1575)
    at (index):206:18
    at Array.forEach (<anonymous>)
    at (index):205:49

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小瓶盖 2025-02-12 04:51:24

您的QuerySelector不正确，您需要替换下面的行：

NiceSelect.bind(document.querySelector("table td select"));

使用此行

NiceSelect.bind(document.querySelectorAll("table select")[0]);

，上面的行应将niceselect绑定到第一个选择元素。

如果您尝试将niceselect绑定到所有选择元素，则可以尝试下面的代码段。不知道为什么它有效，但对我有用

let el = document.querySelectorAll('select');
for (let i = 0; i < el.length; i++) {         
  NiceSelect.bind(document.querySelectorAll("select")[i]);
}

Your querySelector is incorrect, you need to replace the line below:

NiceSelect.bind(document.querySelector("table td select"));

with this line

NiceSelect.bind(document.querySelectorAll("table select")[0]);

The above line should bind NiceSelect to the first select element now.

If you are trying to bind NiceSelect to all the select elements, you can try the code snippet below. Not sure why it works but it just works for me

let el = document.querySelectorAll('select');
for (let i = 0; i < el.length; i++) {         
  NiceSelect.bind(document.querySelectorAll("select")[i]);
}

回复收藏 0 原文

~没有更多了~