Jquery从下拉列表中获取所选值的id

时间:2013-10-01 05:01:57

标签: javascript jquery

我有一个下拉列表,从db中获取值,如下所示

$.get('/getJobs', function (jobs) {
        seljobs = jobs;
        var i = 0;
        jobs.forEach(function (n) {
                           alert("job id----"+n.id)// 32,67,45
                           alert("job names----"+n.names)//test1,test2,test3

            html += '<option value="' + i + '">' + n.names + '</option>';
            i++;
        });
        $('#jobSel').html(html);
    });

我必须获得所选下拉值的id ..

在我的下拉菜单中,我的名字为test1,test2,test3并且已经联系id's 32,67,45,

在选择test1时我必须得到id 32,所以如此。如何可能

<tr>
                        <td width="200px">Jobs</td>
                        <td> 
                            <select id="jobSel" class="longcombo"></select>
                        </td>
                    </tr> 

4 个答案:

答案 0 :(得分:20)

试试这个

关于变更事件

$("#jodSel").on('change',function(){
    var getValue=$(this).val();
    alert(getValue);
  });

注意:在dropdownlist中如果要设置数据库中的id,text关系,请在选项标记中将id设置为值,而不是在选项内添加额外的id属性,而不是标准的实用值我在答案中都做了两件事,但我更喜欢示例1

HTML标记

Example 1:
    <select id="example1">
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
        <option value="4">four</option>
    </select>
Example 2 :
    <select id="example2">
        <option id="1">one</option>
        <option id="2">two</option>
        <option id="3">three</option>
        <option id="4">four</option>
    </select>

<强> Jquery的:

$("#example1").on('change', function () {
    alert($(this).val());
});

$("#example2").on('change', function () {
    alert($(this).find('option:selected').attr('id'));
});

查看演示:For example 1, example 2

博客文章:Get and Set dropdown list selected value with Jquery

Learn jQuery: Simple and easy jQuery tutorials blog

答案 1 :(得分:5)

尝试更改事件和选定的选择器

$('#jobSel').change(function(){
    var optId = $(this).find('option:selected').attr('id')
})

答案 2 :(得分:2)

首先在您的选项中设置自定义属性,例如nameid(您可以设置HTML元素的非标准化属性,允许):

'<option nameid= "' + n.id + "' value="' + i + '">' + n.names + '</option>'

然后您可以使用jquery .attr()轻松获取属性值:

$('option:selected').attr("nameid")

例如:

<select id="jobSel" class="longcombo" onchange="GetNameId">
    <option nameid="32" value="1">test1</option>
    <option nameid="67" value="1">test2</option>
    <option nameid="45" value="1">test3</option>    
    </select>    

Jquery的:

function GetNameId(){
   alert($('#jobSel option:selected').attr("nameid"));
}

答案 3 :(得分:1)

如果您想获取ID,请更新您的代码,如

  html += '<option id = "' + n.id + "' value="' + i + '">' + n.names + '</option>';

要检索ID,

$('option:selected').attr("id")

检索价值

$('option:selected').val()

在Javascript中

var e = document.getElementById("jobSel");
var job = e.options[e.selectedIndex].value;