2014-09-30 73 views
2

呼叫從選擇元件在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>

JavaScript函數我具備上述兩個片段。 當我提醒對象我得到完整的<選擇&tg;標記及其所有選項。

但是,我想要的是傳遞的對象應該只是我選擇的選項而不是完整的選擇元素塊。

+0

是我想要的選項的完整的HTML選擇,我非常感謝@Regent的答案。 – Prashant 2014-11-06 08:44:17

回答

4

而不是過時的onchange你可以使用jQuery $('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建議使用不顯眼的事件處理程序,但-1不能讀取問題。這是他想要的選項元素,而不是文本。 – anddoutoi 2014-09-30 09:39:03

+0

@anddoutoi您確定''是否被請求,不僅是其文本值?我其實讀過問題。 – Regent 2014-09-30 09:42:49

+1

「但是,我想要的是通過的對象應該只是我選擇的選項」 – anddoutoi 2014-09-30 09:47:04

1

嘗試:

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

+1

你爲什麼推薦內嵌JavaScript?分開你的顧慮,並把它們放在一個單獨的JS文件中。 – Undefined 2014-09-30 09:36:29

+1

剛回答問題。但絕對同意f.e.攝政公司的解決方案作爲處理事件的更好方法。 – jevgenig 2014-09-30 09:37:56

+1

@jevgenig是的,我同意,它是「按原樣」,順便說一句,這個答案是投票。但是,顯示OP適當的方式來處理事件是很好的。這是提到的想法。 – Regent 2014-09-30 09:40:24

0

您可以使用:selected選擇如下:

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

OP想要選項元素。不是價值。在提交答案之前閱讀Q. – anddoutoi 2014-09-30 09:35:30

+0

@anddoutoi編輯 – patrykf 2014-09-30 09:38:02

+0

@SwaghettiYolonese爲什麼'.eq(0)'? – 2014-09-30 09:41:55

1

用作

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

DEMO

,或者您可以使用

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

DEMO

0

您可以傳遞對象或者您可以在函數中獲取選定的選項。

若要選擇的選項中的HTML代碼如下功能使用 -

注意 - 請更正功能拼寫無論是在onchange或函數聲明。

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>

另一種方法是使用jQuery綁定change事件處理程序,並獲得選擇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>