如何使用javascript或jquery从具有相同CSS类名称的两个不同下拉列表中选择选项

Question

我想更新两个下拉菜单中的值，如所附图像所示，看看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>

和

<div class="checkbox"><label> <input type="checkbox" class="checkbox1 status" value="id=${id}&objectId=${imageId}&status=&reason=">Check me out
                                    </label>
                                </div>

相同的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);
                    }
                })
            });

我能够成功获取一个下拉值，但无法获取另一个下拉值，下面的语句仅给出一个下拉值，但不能同时给出两个下拉值。

var status = $($(this).parent().parent().prev()).val();

Answer 1

您正在通过css类“ .status”搜索DOM中的所有下拉列表，但是，在您的代码中，下拉列表中没有css类，而是将两个“ name”属性都设置为status。 因此，您可以通过添加class="status"来更改下拉菜单，或者必须更改在js中搜索下拉菜单的方式。 顺便说一下，在html 4中具有更多具有相同name属性的元素是合法的，但不建议使用，在html 5中现在考虑为错误。 在您的情况下，您可以像这样修改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>

无需更改您的js。