Howto set the x-editable select with the value and see the text on click it?

Question

I have a select input with data loaded by ajax and the width div is small (only 2 characters).

I need set the select input (on success) with the value but show the text on click the select.

Situation: https://jsfiddle.net/9u7qm28h/

html:

<div id="my_id" style="margin: 50px">
  Select item: <a href="#" data-pk="1" data-value="1">1</a>
  Select item: <a href="#" data-pk="3" data-value="3">3</a>
</div>

my script:

$('#my_id a').editable({
  showbuttons: false,
  type: 'select',
  title: 'Select item',
  source: [
    {value: 1, text: 'this is the item #1'},
    {value: 2, text: 'this is the item #2'},
    {value: 3, text: 'this is the item #3'},
    {value: 4, text: 'this is the item #4'},
    {value: 5, text: 'this is the item #5'}
  ] });

Any suggestions would be appreciated. Thanks!

Answer 1

You can use title attribute of anchor tag to add description for anchor tag. It will be displayed on hover.