将选定属性设置为动态制表的选项列表

Question

我有一组选项正在动态列表中。
例如：下面是一组选项正在列表中的示例：
选项1
选项2
选项3

这里我没有明确地将任何选项设置为默认值，因此，按照惯例，它将 option1 作为默认值。
但是，我想要在我的用例中做的是搜索整个选项并检查是否有一个名为 option3 的选项，如果它存在，然后通过添加 selected 将其设置为默认值=selected 属性。

下面是sn-p关注的代码：

1. HTML

<div class="form-grp">
    <label for="selectOption">Select Option</label>
    <select class="form-ctl" id="selectTemplate" data-field-type="option" class="tempList">                     
    </select>
</div>

2。 JS

    var optionList = _.map(optObj, function(opt){
        return '<option>' + option.name + '</option>';
    });
 $('[data-field-type="option"]').html(optionList);

• 这里，optionList 是一个对象，我正在从该对象中获取选项名称。

有人可以帮我解决这个问题吗。
我尝试了以下但没有运气。

var html = _.map(templates, function (template) {
  for(i=0;i<templates.length;i++){
      if(template.name=="story"){
          $( function() {
             $(".tempList option:selected").attr("selected", "selected");
          });
       }
   return '<option>'+ template.name + '</option>';
 }
});

是否可以在不使用 id 选择器的情况下做到这一点？或者有没有其他方法可以简单地遍历选项，然后将选定的属性添加到感兴趣的选项？。

提前非常感谢。非常感谢任何帮助或建议。

Answer 1

如果我理解正确，您想设置一个按其内容选择的选项，因此您可以在其中进行如下操作：

const optObj = [
  {name: "Option1"},
  {name: "Option2"},
  {name: "Option3"},
];

const optionList = optObj.map(function(option){
    return '<option>' + option.name + '</option>';
});

$('[data-field-type="option"]').html(optionList);
 
function selectOptionByContent(content) {
  $(`select option:contains("${content}")`).prop('selected',true);
}

selectOptionByContent("Option3");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-grp">
    <label for="selectOption">Select Option</label>
    <select class="form-ctl" id="selectTemplate" data-field-type="option" class="tempList">                     
    </select>
</div>