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

Question

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

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

关注的代码片段如下：

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>

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

Setting selected attribute to an option list that is tabulated dynamically

html

javascript

jquery

select

drop-down-menu