Display id from dropdown using jQuery-CodePudding

As you can see each <option has an ID, I would like to display the id along with the link, but sperate how can I do that ? I am only able achieve it with links. One link will change with Title and the other will change only href. But I need to display the id also, how ?

I would like to display the id value like this, <span id="link_id" ></span> how can I display the id value of each link upon changing selection ?

I tried with $("#application option:selected").prop('id'); but it didn't worked.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
    <td><p>Add Micro SD Card</p>
        <select id="application">
        <option id="link1" value="https://google.com/">Google</option>
        <option id="link2" value="https://facebook.com/">Facebook</option>
        <option id="link3" value="https://youtube.com/">YouTube</option>
        </select>
    </td>
</tr>
<tr>
<td align="center"  id="logInBtn"> <br>
<a id="link_combo"  href="#">Click</a> <br>
<a id="link_combo2"  href="#">Click</a> <br>
</td>
</tr>                                   
                                            
                                            
<script>
$("#application").change(function () {
  console.log(this.value);
  $("#link_combo").attr('href', this.value);
  $("#link_combo2").attr('href', this.value);
  $("#link_combo").text($("#application option:selected").text());
  
});
</script>

CodePudding user response：

As I am unsure of where you hope to place the span, i placed it under the two anchors. You can rearrange this as necessary. I moved your logic into a function called SetTheLinkData and call this on document ready to set the values with the default(s) as your example wasn't doing this.

$(function(){
    //change event handler for drop down  
    $("#application").on('change', SetTheLinkData);
    //Call the function on document ready to get the values populated
    SetTheLinkData();
});

function SetTheLinkData(){
    const $ddl = $("#application");
    const $optselected = $ddl.find('option:selected');
    $("#link_combo").attr('href', $ddl.val());
    $("#link_combo2").attr('href', $ddl.val());
    $("#link_combo").text($optselected.text()); 
    $('#link_id').text($optselected.prop('id'));
}

span.link-id-text {
   font-weight: bold;
   color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
    <td>
        <p>Add Micro SD Card</p>
        <select id="application">
            <option id="link1" value="https://google.com/">Google</option>
            <option id="link2" value="https://facebook.com/">Facebook</option>
            <option id="link3" value="https://youtube.com/">YouTube</option>
        </select>
    </td>
</tr>
<tr>
    <td align="center"  id="logInBtn"> <br>
        <a id="link_combo"  href="#">Click</a> <br>
        <a id="link_combo2"  href="#">Click</a> <br>
        <span  id="link_id"></span>
    </td>
</tr>