检查选项(来自 Json 对象)是否存在于选择下拉列表中



两种情况:以下两种情况不会同时运行。我有一个包含现有选项的选择下拉列表,我需要做的是

  1. 将"selected"属性添加到与对象中的键匹配的选项中。我在这里不需要多个选择,我不知道如何在这里解释我的实际场景,因此我在 if 条件中使用了"蝙蝠侠"if(jQuery(this(.val(( == "蝙蝠侠"(,在我的场景中蝙蝠侠是动态的。

  2. 如果键不匹配并且不存在于 DOM(select( 中,则将该键作为选项附加并添加"selected"属性。

我快到了,但是如果不替换下拉列表中的所有值,我就无法找到解决方案(请运行代码段(。我也尝试过附加选项,但无法正确处理。

var obj = {"characters": [{"Hulk": "Hulk"}]};
var opt;
$.each(obj["characters"], function(index, value) {
  $.each(value, function(val) {
    $('.sel-dropdwn').each(function() {
      if ($(this).find('option').val() == val)
        $(this).find('option').attr('selected', 'selected');
      else{
       opt = $('<option></option>');
       opt.text(val).val(val).attr('selected','selected');
       $(this).append(opt)
      }  
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select aria-required="true" class="form-control sel-dropdwn">
  <option value="">-- None --</option>
  <option value="Superman">Superman</option>
  <option value="Batman">Batman</option>
  <option value="Ironman">Ironman</option>
</select>

根据注释和OP的澄清,我们理解我们想要选择或添加并选择给定的值。

let character = 'Hulk';
let exists = $('.sel-dropdwn option[value="'+ character + '"]').length > 0;
if(!exists){
   let option = $('<option value="'+ character + '"></option>').text(character);
   $('.sel-dropdwn').append(option);
}
$('.sel-dropdwn').val(character);

我在这里使用单个字符值。您可能有一个带有键/值的 obj。

最新更新