Jquery從下拉列表中獲取所選值的id

Question

我有一個下拉列表，它從數據庫中獲取值如下

$.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 ..

ic 在我的下拉列表中我有名稱值test1,test2,test3 ans id's 32,67,45,

在選擇 test1 時，我必須獲得 id 32 等等。這怎么可能

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

Answer 1

試試這個

在更改事件

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

注意：在dropdownlist如果你想從你的數據庫中設置 id，文本關系，然后將 id 設置為選項標簽中的值，而不是通過在選項中添加額外的id屬性它不是標准的paractise 雖然我在我的回答中都做了但我更喜歡示例 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>

查詢：

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

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

Answer 2

嘗試更改事件和選定的選擇器

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

Answer 3

首先在您的選項中設置一個自定義屬性，例如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>    

查詢：

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

Answer 4

如果您正在嘗試獲取 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;