jquery - Call a javascript function from select element in HTML - Stack Overflow

admin管理员组

文章数量:1023195

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>

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 plete <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 plete select element block.

• javascript
• jquery
• html

Share Improve this question Follow asked Sep 30, 2014 at 9:28 PrashantPrashant 13511 gold badge22 silver badges88 bronze badges 1

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

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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);
    });
});

Try:

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

Use as

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

DEMO

OR You can use

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

DEMO

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

You can use :selected selector follows:

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

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>

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 plete <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 plete select element block.

• javascript
• jquery
• html

Share Improve this question Follow asked Sep 30, 2014 at 9:28 PrashantPrashant 13511 gold badge22 silver badges88 bronze badges 1

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

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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);
    });
});

Try:

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

Use as

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

DEMO

OR You can use

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

DEMO

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

You can use :selected selector follows:

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

本文标签： jqueryCall a javascript function from select element in HTMLStack Overflow