How to call javascript or jquery function inside dropdown

Question

I have the following HTML code:

<select name = 'category' id='category'>
    <option value="a">A <a href="" class = "edit" id ='1'> Click here to edit </a> </option>
    <option value="b">B <a href="" class = "edit" id ='b'> Click here to edit </a> </option>
</select> 

I am trying like this:

$(document).on('click','.edit', editfunction);

function editfunction() {
    alert('hi');
    //call here ajax code 
}

Answer 1

Firstly your HTML is invalid; you cannot have a elements inside an option :

<select name="category" id="category">
    <option value="a">A</option>
    <option value="b">B</option>
</select>

To do what you require you can hook to the change event of the select , not the click of the a within the option . You can then use $(this).val() to get the selected value in editFunction() :

$(document).on('change', '#category', editfunction);

function editfunction() {
    var value = $(this).val();
    console.log(value);
    // AJAX...
}

Answer 2

Try using the following

$('#category').on('change', function(){
   editfunction( $(this).val() );
 })

function editfunction(val){
   // Make your ajax call here
}

And You actually dont need the tag inside to make this happen

I think this is what u want JSFIDDLE example