我使用了一个数组ob对象来创建动态div。我的每个对象都有一个属性&logo; logoColor'其值为1或2。
现在,在我的每一个动态div中,我都有一个下拉列表' Logo Color'它的值为1或2.但是,它显示为' Red'或者' Blue'。
用户可以选择更改下拉列表中的任何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!");
}
});
}
&#13;
.box {
background-color: skyblue;
height: 100px;
border: 2px solid lightgrey;
border-radius: 4px;
margin-top: 5px;
}
&#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>
<button class="btn btn-primary" onclick="sendData()">Send Data </button>
<div class="container">
</div>
&#13;
答案 0 :(得分: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>
答案 1 :(得分:1)
尝试按如下方式遍历动态生成的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>
答案 2 :(得分:0)
Try :
var logoColor = $(this).find(".selectLogo").val();