オブジェクト値に基づいて動的選択ボックス内の値を選択します

Question

私は動的divを作成している配列obオブジェクトを使用しています。 私のオブジェクトには1または2のいずれかの値を持つ 'logoColor'プロパティがあります。

私の動的divのそれぞれには、値1または2のドロップダウン 'ロゴカラー'があります。しかし、 「赤」または「青」と表示されます。

ダイナミックドロップダウンで選択した値が、対応するオブジェクト値に基づいていることを確認するにはどうすればよいですか？

たとえば、会社がBCDのオブジェクトの場合、選択したとおりに「2」または「青」が表示されます。

は、ここに私のコード

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') 
 
     ) 
 
    ) 
 
    ) 
 
    }); 
 
}

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

<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>

Answer 1

あなたの現在のコード与えられた最も簡単な方法ですが、ちょうどこのようなあなたのappend()呼び出しの後.val(obj.logoColor)を追加することです：

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

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

<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> \t 
 
<div class="container"> 
 
\t 
 
</div> 
 
\t