How to get selected data ID in DropDown?

Question

I written the following code using thymeleaf

<div class="form-group">
    <div class="col-xs-12 col-sm-9">
        <div class="clearfix">
            <label
                class="control-label col-xs-12 col-sm-4 no-padding- right"
                for="name">System</label> <select
                class="tbrightspace input-large" id="userCategory"name="systemId"
                style="margin: 0px 0px 10px 0px; padding: 0px; width:42%;">

                        <option th:text="--Select--">Select</option>
                        <option th:each="roles:${systemList}"
                                th:value="${roles.systemId}"
                                th:selected="${roles.systemName}"
                                th:text="${roles.systemName}" />
                                <!-- <option value="101">Collections Management</option>
                                <option value="102">CHD</option>
                                <option value="103">Client Tools</option> -->
                                </select>
                </div>
            </div>
                        &nbsp;&nbsp;&nbsp;
        </div>

in this DropDown box,three data are loaded.Now i want to get the selected data ID,because i want to findall data in DB table by passing the ID in ajax url,Like

   $.ajax({
       url: "/collection-ui/api/permissions/findall/id",   //http://localhost:8080
       success: function( treeData ) {
           var tree = $("#tree2").dynatree("getTree");
           var rootNode = $("#tree2").dynatree("getRoot");

I juz tried like

 <script th:inline="javascript">
  /*<![CDATA[*/

    var id=/*[[@{{id}(id=${systemList.get(0).systemId})}]]*/    
    alert(id); 
    /*]]>*/
</script>

This is alert or give the first object id data only.But i want to get the ID while select the data in dropdown box.How can i?? plz anybody help

score 1 · Accepted Answer · answered Jul 31 '14 at 11:42

1

Try this

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

Another approach:

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

answered Jul 31 '14 at 11:42

Earth

3,477
6
37
78

These function is not working or i can't call these functions.I juz add the first function in my script but no response and alert.plz help – Md Aslam Jul 31 '14 at 12:23
Actually I realized a fault,finally it's working successfully. Thank you so much john. – Md Aslam Jul 31 '14 at 12:31
And small help, i want to pass this vaiable to my ajax url,I want to pass like /collection-ui/api/permissions/findall/getvalue but this is not working.This shows the error getvalue is undefined,So how to pass ??plz help – Md Aslam Jul 31 '14 at 12:35
You need to call from the `success` callback itself when you are calling the code which relies on the `AJAX` call – Earth Jul 31 '14 at 12:43

score 0 · Answer 2 · edited May 23 '17 at 10:33

Although this is almost duplicate of Old Post

But you want ID so you can try something like this..

HTML:

<select id="ddlViewBy">
    <option id="s1" value="1">test1</option>
    <option id="s2" value="2" selected="selected">test2</option>
    <option id="s3" value="3">test3</option>
</select>
 &nbsp;&nbsp;&nbsp;&nbsp;<a name="ding" onclick="test()">Click me!!</a>

Javascript:

function test(){
    var e = document.getElementById("ddlViewBy");
    var strUser = e.options[e.selectedIndex].id;//text
   alert(strUser);
    return false;
}

Here is working jsFiddle

How to get selected data ID in DropDown?

2 Answers2