更改Metro4选择中的选定选项

Question

我正在尝试使用metro4 CSS库更改选择的所选项目。我通过删除data-role="select"使它起作用，但我想保留该属性的搜索功能。

我的代码：

function rowOnClick(row){
      cells = row.getElementsByTagName("td")
      elmnt = document.getElementById('selectComponente')
      for(var i=0; i < elmnt.options.length; i++){
        if(elmnt.options[i].value === cells[2].innerHTML) {
          console.log(elmnt.options[i].value);
          elmnt.selectedIndex = i;
          break;
        }
      }
    }

我的选择

<select id="selectComponente"
        data-role="select"
        data-cls-option="bg-lightAmber-hover">

编辑： 我也在尝试按照文档中的建议使用jquery，但仍然无法正常工作：

function rowOnClick(row){
  cells = row.getElementsByTagName("td")
  var select = $("#selectComponente");
  select.val(cells[2].innerHTML)
  console.log(select.val());
}

作者建议我这样做

var select = $("#selectComponente").data("select");
select.val(cells[2].innerHTML)

但是我在进行另一种操作时得到了TypeError: select is undefined，它不起作用，但是select已定义。