时间戳

首页 > 解决方案 > 将选定属性设置为动态制表的选项列表

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

问题描述

我有一组正在动态制表的选项。
例如：下面是列表中的一组选项示例：
option1
option2
option3

在这里，我没有明确地将任何选项设置为默认值，因此，按照惯例，它将 option1 作为默认值。
但是，我想要在我的用例中做的是搜索整个选项并检查是否有一个名为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);

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

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 选择器的情况下做到这一点？或者有没有其他方法可以简单地遍历选项，然后将选定的属性添加到感兴趣的选项？

首先十分感谢。非常感谢任何帮助或建议。

标签： javascripthtmljqueryselectdrop-down-menu

解决方案

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

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>

推荐阅读