从HTML中的select元素调用javascript函数

时间:2014-09-30 09:28:34

标签: javascript jquery html



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>
&#13;
&#13;
&#13;

我有以上两个片段。 当我对物体发出警报时,我会得到完整的&lt; select&amp; tg;标记及其所有选项。

但是,我想要的是传递的对象应该只是我选择的选项而不是完整的选择元素块。

5 个答案:

答案 0 :(得分:4)

您可以使用jQuery onchange

而不是过时的$('selector').change(function() { });

Fiddle

简化的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());
    });
});

<强>更新即可。如果您需要选择<option>外部HTML,则可以是:

Fiddle

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

答案 1 :(得分:1)

尝试:

onchange="MyFunc(jQuery(this).find('option:selected'))&#34;

答案 2 :(得分:1)

用作

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

DEMO

或者您可以使用

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

DEMO

答案 3 :(得分:0)

您可以使用:selected选择器:

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

答案 4 :(得分:0)

您可以传递对象,也可以在功能中获取所选选项。

要在函数代码中使用选定的html选项 -

注意 - 请在onchange或函数声明中更正函数的拼写。

&#13;
&#13;
function MyFunc(obj1)
{
  var value = obj1.value;
  var optionHTML = $(obj1).find('option[value="'+value+'"]');
  
  alert($('<div>').append(optionHTML.clone()).html());
}
&#13;
<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>
&#13;
&#13;
&#13;

另一种方法是使用jquery绑定change事件处理程序并获取选项html

&#13;
&#13;
$('#myselect').change(function(){
  var value = $(this).val();
  var option = $(this).find('option[value="'+value+'"]');
  var optionHTML = $('<div>').append(option.clone()).html();
  alert(optionHTML);
});
&#13;
  <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>
&#13;
&#13;
&#13;