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

我想更新附加图片中显示的两个下拉列表的值，查看相同的html代码（对于两者都使用相同的css属性选择）如何使用javascript或jquery从相同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代码如下结合所有的输入数据，并推动到AP我

$('#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();

来源

2017-10-20 Asad Ali

你是什么意思，“成功绑定一个下拉值”？ – void

另外，我们不知道'＃allPhotoFormBtn'在哪里，可能附加更多的DOM结构？ – Groovetrain

你的HTML中没有叫'.status'的类。 –

您通过CSS类“.STATUS”搜索DOM中的所有下拉菜单，但是，在你的代码，下拉菜单没有CSS类但两者‘名称’属性设置为状态。所以要么你改变你的下拉列表，要么增加class="status"，要么你必须改变你在js中搜索它们的方式。顺便说一句，在html 4中有更多的元素具有相同的名称属性是合法的，但不建议，在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。

来源

2017-10-20 12:27:10

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

回答

相关问题