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.

yes i wanted the complete HTML of the option selected, and i am really thankful to @Regent for the answer. — Prashant
– Prashant, Commented Nov 6, 2014 at 8:44

Regent · Accepted Answer · 2014-09-30 09:47:09Z

4

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);
    });
});

edited Sep 30, 2014 at 9:47

answered Sep 30, 2014 at 9:33

Regent

5,1743 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

anddoutoi Over a year ago

+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 Over a year ago

@anddoutoi are you sure <option value="v1">Value 1</option> is requested, not only its text value? I actually read question.

anddoutoi Over a year ago

"But, What i want is the object passed should only just be the option which i have selected"

Jevgeni · Accepted Answer · 2014-09-30 09:30:44Z

1

Try:

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

answered Sep 30, 2014 at 9:30

Jevgeni

2,5741 gold badge18 silver badges18 bronze badges

5 Comments

Undefined Over a year ago

Why are you recommending inline JavaScript? Separate your concerns and put them in a separate JS file.

Jevgeni Over a year ago

Just answered the question as is. But absolutely agree with f.e. Regent's solution as a better approach of handling events.

Regent Over a year ago

@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 Over a year ago

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 Over a year ago

@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.

Amit · Accepted Answer · 2014-09-30 09:36:30Z

1

Use as

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

DEMO

OR You can use

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

DEMO

answered Sep 30, 2014 at 9:36

Amit

15.4k8 gold badges49 silver badges69 bronze badges

Comments

Bhushan Kawadkar · Accepted Answer · 2014-09-30 09:43:31Z

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>

T J · Accepted Answer · 2014-09-30 10:51:23Z

0

You can use :selected selector follows:

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

edited Sep 30, 2014 at 10:51

T J

43.2k13 gold badges87 silver badges142 bronze badges

answered Sep 30, 2014 at 9:34

patrykf

4496 silver badges20 bronze badges

5 Comments

anddoutoi Over a year ago

OP wants the option element. Not the value. Read the Q before submitting the A.

T J Over a year ago

@SwaghettiYolonese why .eq(0)?

anddoutoi Over a year ago

Somehow I can't undo my downvote and make a upvote. Says it need to be edited first >.<

patrykf Over a year ago

@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 Over a year ago

@anddoutoi No problem I'm here to learn and help not for points.

Collectives™ on Stack Overflow

Call a javascript function from select element in HTML

5 Answers 5

3 Comments

5 Comments

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

5 Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related