Question

我使用了一个数组ob对象来创建动态div。我的每个对象都有一个属性＆logo; logoColor＆＃39;其值为1或2。

现在，在我的每一个动态div中，我都有一个下拉列表＆＃39; Logo Color＆＃39;它的值为1或2.但是，它显示为＆＃39; Red＆＃39;或者＆＃39; Blue＆＃39;。

如何确保动态下拉列表中的选定值基于相应的对象值？

例如，对于公司为BCD＆＃39;的对象，我应该看到＆＃39; 2＆＃39;或者＆＃39;蓝＆＃39;如选中。

这是我的代码

＆＃13;

var myData = [{
  "company": "ABC",
  "logoColor": "1"
}, {
  "company": "BCD",
  "logoColor": "2"
}, {
  "company": "CDE",
  "logoColor": "1"
}, {
  "company": "DEF",
  "logoColor": "2"
}];

function createDisplay() {
  myData.forEach(function(obj) {
    $('.container').append(
      $('<div>').addClass('box').append(
        $('<label>').text('Company Website: '),
        $('<a>').addClass('compUrl').attr('href', obj.url).text(obj.company),
        $('<br /><label>').text('Logo Colour: '),
        $('<select>').addClass('form-control').append(
          $('<option>').val('1').text('Red').prop('selected', true),
          $('<option>').val('2').text('Blue')
        )
      )
    )
  });
}

＆＃13;

.box {
  background-color: skyblue;
  height: 100px;
  border: 2px solid lightgrey;
  border-radius: 4px;
  margin-top: 10px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button class="btn btn-primary" onclick="createDisplay()">Create Data </button>
<div class="container">

</div>

＆＃13;

根据对象值在动态选择框中选择值

0 个答案: