2014-11-17 190 views
1

我無法獲得所選的<option>值。 <select> s是從數據庫動態形成表格行。所有<select>都具有相同的類名。從特定選擇中獲取選定的選項值

這裏是我的HTML:

<tr> 
    <td class="std_code">2014-1-10</td> 
    <td>Student 10</td> 
    <td>66</td> 
    <td>100</td> 
    <td>66</td> 
    <td> 
     <select class="degree_accept_id"> 
      <option value="1">BA(LAW)</option> 
      <option value="2">BE(EE)</option> 
     </select> 
    </td> 
    <td>17 November 2014</td> 
    <td> 
     <a href="" class="ee_accept_suggestion"><i class="fa fa-check fa-lg"></i></a> 
    </td> 
</tr> 
<tr> 
    <td class="std_code">2014-1-9</td> 
    <td>Student 9</td> 
    <td>69</td> 
    <td>100</td> 
    <td>69</td> 
    <td> 
     <select class="degree_accept_id"> 
      <option value="1">BA(LAW)</option> 
      <option value="2">BE(EE)</option> 
     </select> 
    </td> 
    <td>17 November 2014</td> 
    <td> 
     <a href="" class="ee_accept_suggestion"><i class="fa fa-check fa-lg"></i></a> 
    </td> 
</tr> 
<tr> 
    <td class="std_code">2014-1-8</td> 
    <td>Student 8</td> 
    <td>71</td> 
    <td>100</td> 
    <td>71</td> 
    <td> 
     <select class="degree_accept_id"> 
      <option value="1">BA(LAW)</option> 
      <option value="2">BE(EE)</option> 
      <option value="3">BE(ME)</option> 
     </select> 
    </td> 
    <td>17 November 2014</td> 
    <td> 
     <a href="" class="ee_accept_suggestion"><i class="fa fa-check fa-lg"></i></a> 
    </td> 
</tr> 

JS代碼:

<script> 
    $(document).ready(function() { 
     $('.ee_accept_suggestion').click(function(e) { 
      e.preventDefault(); 
      var std_code = $(this).parent().siblings(".std_code").text(); 
      //var selected_degree = $(".degree_accept_id option:selected", this).attr("value"); 
      //var selected_degree = $(this).val(); 
      var selected_degree = $("select.degree_accept_id").val(); 
      alert(selected_degree); 
     }); 
    }); 
</script> 

問題:alert總是顯示。

回答

3

如果你想相對於點擊事件下拉列表中選擇的值,用這個

$('.ee_accept_suggestion').click(function(e){ 
var dropdownValue = $(this).closest('tr').find('.degree_accept_id').val(); 

正在發生的事情是

  • 首先,點擊元素用於$(this)和被包裹在一個jQuery對象可以訪問API,
  • closest('tr')首先搜索自己,然後第一次出現的父節點是<tr>
  • 一旦找到<tr>元素,.find('.degree_accept_id')將找到歸類爲「degree_accept_id」的該tr下的元素。
  • jQuery的.val()獲取與輸入,選擇(在本例中)或textarea元素相關聯的值。
+1

這實際上工作!但是,$(this).closest('tr')背後的邏輯是什麼?find('。degree_accept_id')。val(); – Shariati

+0

@Shariati - 查看編輯的解釋:) –

+0

Thanks @ Travis J – Shariati

相關問題