从特定选择中获取选定的选项值

时间:2014-11-17 10:15:50

标签: jquery html

我无法获得所选的<option>值。 <select>是从数据库动态形成的表行。所有<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始终显示 1

1 个答案:

答案 0 :(得分:3)

如果您想要相对于click事件的下拉列表的选定值,请使用此

$('.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')会将该tr下的元素定位为“degree_accept_id”。
  • jQuery的.val()获取与输入,select(在本例中)或textarea元素相关联的值。