在每个动态 div 中获取元素的值

Question

我有一个数组 ob 对象，我正在使用它创建动态 div。我的每个对象都有一个属性“logoColor”，其值为 1 或 2。

现在，在我的每个动态 div 中，我都有一个下拉菜单“徽标颜色”，其值为 1 或 2。但是，它显示为“红色”或“蓝色”。

用户可以选择更改下拉菜单中的任何 logoColor 值。

如何在单击“发送数据”按钮时调用的同一函数 sendData() 中从动态生成的 div 中获取每个下拉列表的值？

代码片段：

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: '),
		$('<span>').text(obj.company),
		$('<br /><label>').text('Logo Colour: '),
		$('<select>').addClass('selectLogo').append(
		  $('<option>').val('1').text('Red').prop('selected', true),
		  $('<option>').val('2').text('Blue')
		).val(obj.logoColor)
	  )
	)
  });
}

function sendData(){
	
  myData.forEach(function(obj){
	var logoColor = $('.selectLogo').val();
  });
  var myJSON = JSON.stringify(myData);
  var dataContent = {'content': myJSON};
  
  $.ajax({
	url:"/abc/myNewData",
	type: "POST",
	data: dataContent,
	dataType: 'JSON',
	success: function(response){
	  alert("Data sent successfully!");
	}
  }); 
}

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

<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>	
<button class="btn btn-primary" onclick="sendData()">Send Data </button>	
<div class="container">
	
</div>

Answer 1

试试下面的代码

var logoColor = [];
$('.box .selectLogo option:selected').each(function() {
  logoColor.push($(this).val())
})
var myJSON = JSON.stringify(logoColor);
var dataContent = {
  'content': myJSON
};

这将遍历所有 div 选择并返回所选值。

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: '),
        $('<span>').text(obj.company),
        $('<br /><label>').text('Logo Colour: '),
        $('<select>').addClass('selectLogo').append(
          $('<option>').val('1').text('Red').prop('selected', true),
          $('<option>').val('2').text('Blue')
        ).val(obj.logoColor)
      )
    )
  });
}

function sendData() {
  var logoColor = [];
  $('.box .selectLogo option:selected').each(function() {
    logoColor.push($(this).val())
  })

  var myJSON = JSON.stringify(logoColor);
  var dataContent = {
    'content': myJSON
  };

  console.log(dataContent)
  $.ajax({
    url: "/abc/myNewData",
    type: "POST",
    data: dataContent,
    dataType: 'JSON',
    success: function(response) {
      alert("Data sent successfully!");
    }
  });
}

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

<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>
<button class="btn btn-primary" onclick="sendData()">Send Data </button>
<div class="container">

</div>

Answer 2

尝试循环遍历动态生成的div，如下：

var myData = [];
    $("div.box").each(function(i){
  var obj = {};
   console.log("index"+i);
    obj["company"] = $(this).find("span").text();
    obj["logoColor"] =  $(this).find('.selectLogo').val();
    myData.push(obj);
  });

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: '),
        $('<span>').text(obj.company),
        $('<br /><label>').text('Logo Colour: '),
        $('<select>').addClass('selectLogo').append(
          $('<option>').val('1').text('Red').prop('selected', true),
          $('<option>').val('2').text('Blue')
        ).val(obj.logoColor)
      )
    )
  });
}

function sendData() {
  var myData = [];
  $("div.box").each(function(i) {
    var obj = {};
    console.log("index"+i);
    obj["company"] = $(this).find("span").text();
    obj["logoColor"] = $(this).find('.selectLogo').val();
    myData.push(obj);
  });
  var myJSON = JSON.stringify(myData);
  alert(myJSON);
  var dataContent = {
    'content': myJSON
  };

  $.ajax({
    url: "/abc/myNewData",
    type: "POST",
    data: dataContent,
    dataType: 'JSON',
    success: function(response) {
      alert("Data sent successfully!");
    }
  });
}

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

<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>
<button class="btn btn-primary" onclick="sendData()">Send Data </button>
<div class="container">

</div>

Answer 3

Try : 

var logoColor = $(this).find(".selectLogo").val();