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

我在使用 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);


蝴蝶不菲
浏览 149回答 2
2回答

哆啦的时光机

如果我理解正确,您希望以编程方式在选择框中选择一个选项。为此,我们必须在选择框中选择所有选项并选择所需的选项。这里的挑战是定义需要选择的选项。在这种情况下,我为此使用索引。让我们看看它在代码中的样子。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>

青春有我

您需要添加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;
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript