Call a javascript function from select element in HTML

Question

function Myfunc(obj1)
{
 alert(obj1.prop('outerHTML'));
}

 <select id="myselect" onchange="MyFunc(jQuery(this))">
 <option value="v1">Value 1</option>
 <option value="v2">Value 2</option>
 <option value="v3" selected="selected">Value 3</option>
 </select>

I have the above two snippets. When i do alert of the object i get the complete <select&tg; tag along with all it's options.

But, What i want is the object passed should only just be the option which i have selected and not the complete select element block.

• Prashant: yes i wanted the complete HTML of the option selected, and i am really thankful to @Regent for the answer.

Answer 1

Instead of outdated onchange you can use jQuery $('selector').change(function() { });

Fiddle.

Simplified HTML:

<select id="myselect">
 <option value="v1">Value 1</option>
 <option value="v2">Value 2</option>
 <option value="v3" selected="selected">Value 3</option>
</select>

JS:

$(document).ready(function()
{
 $('#myselect').change(function()
 {
 alert($(this).find(':selected').text());
 });
});

Update. If you need selected <option> outer HTML, then it can be:

Fiddle.

$(document).ready(function()
{
 $('#myselect').change(function()
 {
 alert($(this).find(':selected')[0].outerHTML);
 });
});

• anddoutoi: +1 for advise to use unobtrusive event handlers but -1 for not reading the question. It was the option element he wanted, not the text.
• Regent: @anddoutoi are you sure <option value="v1">Value 1</option> is requested, not only its text value? I actually read question.
• anddoutoi: "But, What i want is the object passed should only just be the option which i have selected"

Answer 2

Try:

onchange="MyFunc(jQuery(this).find('option:selected'))"

• Undefined: Why are you recommending inline JavaScript? Separate your concerns and put them in a separate JS file.
• Jevgeni: Just answered the question as is. But absolutely agree with f.e. Regent's solution as a better approach of handling events.
• Regent: @jevgenig yes, I agree, that it is "as is", and this answer is voted up, by the way. But it's good to show OP appropriate way to handle events. That is the mentioned idea.
• anddoutoi: With that philosophy we should teach OP to attach the listener onDOMReady or window.onload and perhaps even wrap it in AMD or a CommonJS module and sprinkle it with some architectural advise? Question is: how far is to far?
• Jevgeni: @Regent yes, I agree, that it is "good to show OP appropriate way to handle events". Same as "console.debug(...)" is a good replace for alert, and "debugger;" is the best approach to experiment with things.

Answer 3

Use as

function MyFunc(obj1)
{
 alert($("#myselect option:selected").text());
}

DEMO

OR You can use

function MyFunc(obj1)
{
 alert($("#myselect option:selected").html());
}

DEMO

Answer 4

You can pass object or you can fetch selected option in function.

To get selected option html in function use below code -

NOTE - please correct spelling of function either in onchange or function declaration.

function MyFunc(obj1)
{
 var value = obj1.value;
 var optionHTML = $(obj1).find('option[value="'+value+'"]');
 
 alert($('<div>').append(optionHTML.clone()).html());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="myselect" onchange="MyFunc(this)">
 <option value="v1">Value 1</option>
 <option value="v2">Value 2</option>
 <option value="v3" selected="selected">Value 3</option>
 </select>

Another way is to bind change event handler using jquery and get the option html

$('#myselect').change(function(){
 var value = $(this).val();
 var option = $(this).find('option[value="'+value+'"]');
 var optionHTML = $('<div>').append(option.clone()).html();
 alert(optionHTML);
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
 </script>
<select id="myselect">
 <option value="v1">Value 1</option>
 <option value="v2">Value 2</option>
 <option value="v3" selected="selected">Value 3</option>
</select>

Answer 5

You can use :selected selector follows:

$(document).ready(function() {
 $('#myselect').on('change', function() {
 alert($(this).find('option:selected').eq(0));
 });
});

• anddoutoi: OP wants the option element. Not the value. Read the Q before submitting the A.
• T J: @SwaghettiYolonese why .eq(0)?
• anddoutoi: Somehow I can't undo my downvote and make a upvote. Says it need to be edited first >.<
• patrykf: @TJ just to make sure it matches what we need. I can't explain why I always use eq(0) even when I'm sure I catch 1 element. As far as I remember I had some problems in the past while I didn't do it this way.
• patrykf: @anddoutoi No problem I'm here to learn and help not for points.