材料化 CSS - 选择组件 - 使用 Javascript 设置默认值

Question

我在使用 Materialize CSS 和 Select 组件时遇到了困难。代码是这样的：<select id="selectCompId">      <option value="1">Option 1</option>      <option value="2">Option 2</option>      <option value="3">Option 3</option></select>当我访问表单时，我总是根据某些数据库查询获得值 1、2 或 3。现在，如果我得到 2，我想将选项 2 上的选定设置为初始选择。我这样做有问题。尝试这样做： document.getElementById('selectCompId').value = '2' 但它似乎不适用于这个实现组件，或者我做错了。完整代码可以在这里找到：https : //jsfiddle.net/536Lu1xe/1/预期结果：初始值设置为所需值（在这种情况下假设为 2）。解决方案 -> https://jsfiddle.net/536Lu1xe/2/ 在底部，在脚本标签下：var elem = document.querySelector('#selectCompId');var instances = M.FormSelect.init(elem);document.querySelector('#selectCompId option[value="2"]').setAttribute('selected', 'selected');M.FormSelect.init(elem);

Answer 1

如果我理解正确，您希望以编程方式在选择框中选择一个选项。

为此，我们必须在选择框中选择所有选项并选择所需的选项。这里的挑战是定义需要选择的选项。在这种情况下，我为此使用索引。

让我们看看它在代码中的样子。

let n = 1; // the index of the option that needs to be selected. In this case, we want to select Item 2 (the option at index=1)

// the following line will select the <select/> on the page

const select = document.querySelector('select');

// now we have to loop through all options and select the one at Index=1 

select.querySelectorAll('option')[n].selected = true;

<select>

  <option value="1">Item 1</option>

  <option value="2">Item 2</option>

  <option value="3">Item 3</option>

</select>

Answer 2

您需要添加selected属性来选择：

<select>

  <option value="1">Option 1</option>

  <option value="2" selected>Option 2</option>

  <option value="3">Option 3</option>

</select>

编辑：您还需要在更新值后重新初始化 Select ：

const elem = document.getElementById('select_id');

M.FormSelect.init(elem);