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

Question

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

现在，在我的每个动态 div 中，我都有一个下拉列表 'Logo Colour'，其值为 1 或 2。但是，它显示为 'Red' 或 'Blue'.

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

如何在单击 'Send Data' 按钮时调用的同一函数 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

Try : 

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

Answer 2

试试下面的代码

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

这将遍历所有 div select 和 return selected 值。

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 3

尝试按如下方式循环动态生成的 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>

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

Grab an element's value within each of the dynamic div

recursion

jquery

html-select

dynamic

object