材料化 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 pageconst select = document.querySelector('select');// now we have to loop through all options and select the one at Index=1&nbsp;select.querySelectorAll('option')[n].selected = true;<select>&nbsp; <option value="1">Item 1</option>&nbsp; <option value="2">Item 2</option>&nbsp; <option value="3">Item 3</option></select>

Answer 2

您需要添加selected属性来选择：<select>&nbsp; <option value="1">Option 1</option>&nbsp; <option value="2" selected>Option 2</option>&nbsp; <option value="3">Option 3</option></select>编辑：您还需要在更新值后重新初始化 Select ：const elem = document.getElementById('select_id');M.FormSelect.init(elem);&nbsp;