[英]How to select options from two different dropdowns of same css class name using javascript or jquery
I want to update values of two dropdowns as shown in attached image, have a look on html code for the same(using same css proprty for both select) 我想更新两个下拉菜单中的值,如所附图像所示,看看html代码是否相同(两个选择都使用相同的CSS属性)
<div class="container-fluid" role="main" style="margin-top: 100px;">
<form id="allPhotoForm">
<fieldset>
<legend>
Total Pending photos : ${count} <input type="button"
id="allPhotoFormBtn" class="btn btn-primary btn-xs pull-right"
value="Update All">
</legend>
</fieldset>
<div class="checkbox">
<label> <input type="checkbox" class="checkbox1"
id="selecctall"> Select All
</label>
</div>
<select class="form-control" name="status" id="${imageId}">
<option value="APPROVED">Approved</option>
<option value="REJECTED">Rejected</option>
<option value="PENDING">Pending</option>
</select>
Reason : <span style="float: right;">
<select class="form-control" name="status">
<option value="Animal" id="animal">Animal</option>
<option value="Bad" id="bad">Bad</option>
<option value="Baby" id="baby">Baby</option>
<option value="Celebrity" id="celebrity">Celebrity</option>
<option value="Flower" id="flower">Flower</option>
<option value="God" id="god">God</option>
<option value="Good" id="good">Good</option>
<option value="Others" id="others">Others</option>
</select>
</span>
and 和
<div class="checkbox"><label> <input type="checkbox" class="checkbox1 status" value="id=${id}&objectId=${imageId}&status=&reason=">Check me out
</label>
</div>
AJAX code for the same is as follows which binds all input data and pushes to API 相同的AJAX代码如下,该代码绑定所有输入数据并推送到API
$('#allPhotoFormBtn').on(
"click",
function(event) {
event.preventDefault();
var allCheckBox = document.querySelectorAll('.status');
var data = [];
$(allCheckBox).each(
function(index) {
if ($(this).is(':checked')) {
var status = $(
$(this).parent().parent().prev())
.val();
data.push($(this).val().replace("status=",
"status=" + status));
}
});
$.ajax({
url : "/curation/updateAll",
data : {
'data' : data.join(',')
},
type : "POST",
success : function(response) {
if (response)
location.reload();
},
error : function(rs) {
console.log(rs);
}
})
});
I am able to fetch one drop down value successfully, but unable to fetch another one, below statement gives only one dropdown value but not both. 我能够成功获取一个下拉值,但无法获取另一个下拉值,下面的语句仅给出一个下拉值,但不能同时给出两个下拉值。
var status = $($(this).parent().parent().prev()).val();
You are searching all dropdowns in the DOM by the css class ".status" but, in your code, dropdowns have not css class but both a "name" attribute set to status. 您正在通过css类“ .status”搜索DOM中的所有下拉列表,但是,在您的代码中,下拉列表中没有css类,而是将两个“ name”属性都设置为status。 So either you change your dropdowns adding
class="status"
or you have to change the way you search for them in js. 因此,您可以通过添加
class="status"
来更改下拉菜单,或者必须更改在js中搜索下拉菜单的方式。 By the way in html 4 having more elements with same name attribute is legit but not reccomended, in html 5 now is consider error. 顺便说一下,在html 4中具有更多具有相同name属性的元素是合法的,但不建议使用,在html 5中现在考虑为错误。 In your case you can modify your html like this:
在您的情况下,您可以像这样修改html:
<select class="form-control" class="status" id="${imageId}">
<option value="APPROVED">Approved</option>
<option value="REJECTED">Rejected</option>
<option value="PENDING">Pending</option>
</select>
Reason : <span style="float: right;">
<select class="form-control" class="status">
<option value="Animal" id="animal">Animal</option>
<option value="Bad" id="bad">Bad</option>
<option value="Baby" id="baby">Baby</option>
<option value="Celebrity" id="celebrity">Celebrity</option>
<option value="Flower" id="flower">Flower</option>
<option value="God" id="god">God</option>
<option value="Good" id="good">Good</option>
<option value="Others" id="others">Others</option>
</select>
without changing your js. 无需更改您的js。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.