从具有相同名称的多个下拉列表中获取值答案

【问题标题】：Fetch value from multiple drop down with same name row wise从具有相同名称的多个下拉列表中获取值
【发布时间】：2020-03-30 06:01:05
【问题描述】：

我有一张如下表-

我认为这张表的代码如下-

 <table class="table table-bordered">
   <tr>
   <td>Course Name</td>
   <td>Class</td>
   <td>Subject Name</td>
   <td>Month</td>
   <td>View</td>
   </tr>
   <?php if(!empty($data)) { $i=1; foreach($data as $key => $value) { ?>
      <tr>
        <td><?php echo $value->course_name; ?></td>
        <td><?php echo $value->class_name; ?></td>
        <td><?php echo $value->subjectName; ?></td>
        <td><select class="form-control" id="month" data-parsley-required="true" data-parsley-error-message="Please Select Class">
             <option value="" hidden="hidden">Select Month</option>
             <option value="1">January</option>
             <option value="2">Febuary</option>
             <option value="3">March</option>
             <option value="4">April</option>
             <option value="5">May</option>
             <option value="6">June</option>
             <option value="7">July</option>
             <option value="8">August</option>
             <option value="9">September</option>
             <option value="10">October</option>
             <option value="11">November</option>
             <option value="12">December</option>
            </select>
          </td>
          <td>
           <button id="<?php echo $i;?>" class="form-control" data-eid="<?php echo $this->session->userdata('e_id');?>"                                                data-subjectid="<?php echo $value->subjectId;?>" data-courseid="<?php echo $value->course_id;?>" data-classid="<?php echo $value->class_id;?>">
     View</button></td>
 </tr>
  <?php $i++; } } ?>
  </table>

//javascript

<script type="text/javascript">
$('button').on('click',function(){
   var eid = $(this).data('eid');
   var subId = $(this).data('subjectid');
   var courseId = $(this).data('courseid');
   var classId = $(this).data('classid');
   var month = $('#month').val();
   if(month == '')
    alert("Select Month");
   else { alert("okay"); }       
</script>

每当我选择month 并单击view 按钮时，页面都会正确重定向，但是当我在第二行中选择month 并再次单击view 按钮时，它会发出警报select month。

我不知道如何根据名称区分所有下拉菜单。

【问题讨论】：

您需要使用 $(this) 和 closest 这将为您提供与该按钮链接的月份值
id 与 #month 重复。改用类。

标签： javascript php jquery codeigniter

【解决方案1】：

问题是因为您在循环中创建的元素中重复了相同的 id 属性。这些在 DOM 中必须是唯一的。

要解决此问题，您需要将 id 更改为 class。然后你可以使用jQuery的DOM遍历方法找到月份select，它与被点击的按钮在同一行。为此，请使用closest() 获取父级tr，然后使用find()：

<select class="form-control month" data-parsley-required="true" ... >

$('button').on('click', function() {
  var eid = $(this).data('eid');
  var subId = $(this).data('subjectid');
  var courseId = $(this).data('courseid');
  var classId = $(this).data('classid');

  var month = $(this).closest('tr').find('.month').val();
  if (month == '')
    alert("Select Month");
  else 
    alert("okay");  
});

【讨论】：

【解决方案2】：

您可以通过使用 name 属性循环选择来做到这一点。如下所示。

$(document).ready(function(){

$("#show").on('click',function(){
    $("select[name='car']").each(function(){
          var car=$(this).val();
          console.log(car);
    })
})

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td><select name='car'>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select></td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td><select name='car'>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select></td>
    <td>94</td>
  </tr>
</table>
<input type='button' id='show' value='showname'/>

【讨论】：