Jquery返回所选名称

时间:2015-06-11 08:47:59

标签: jquery

<select id="MyId" name="Myname">
  <option value=1>Tom</option>
  <option value=12>Harold</option>e 
  <option value=32>Jenny</option>
</select>

使用

$('select option:selected').each(function () {
    var $el = $(this);
    var text = $el.attr('text');
    alert(text);
 });

我可以获得选项文字

但是如何获取选择标签名称或ID以及所选的选项文本?如下所示返回undefined:text

    $('select option:selected').each(function () {
    var $el = $(this);
    var text = $el.attr('text');
    var name = $el.attr('name');
    alert(name + ":" + text);
    });

4 个答案:

答案 0 :(得分:4)

使用.change()

$('select').change(function() {
   var name = $(this).attr('name'); // get select tag name
   var id = $(this).attr('id'); // get select tag id
   var selectedOption = $(this).val(); // get selected option
   var selectedText = $(this).find('option:selected').text(); // get selected option text
});

答案 1 :(得分:1)

使用closest()parent()获取其ID和名称必需的选择。

$('select option:selected').each(function () {    
    var select = $(this).parent('select');//the tag object
    alert($(this).closest('select').attr('id'));//id
    alert($(this).parent('select').attr('name'));//name
});

答案 2 :(得分:1)

Try This

$('select option:selected').each(function () {
  var $el = $(this);
  var text = $el.text();
  alert(text);
});

答案 3 :(得分:0)


你可以试试这个。它适用于我。

<!doctype html>
<html lang="en">
    <head>
        <title>Select Box</title>
        <script data-main="js/main" src="lib/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('select[name="choice"]').change(function () {
                    var mySelect = $(this);
                    alert("selected " + mySelect.find('option:selected').text());
                });
            });
        </script>
    </head>
    <body>
        <select  name="choice" >
            <option value='1'>Choice 1</option>
            <option value='2'>Choice 2</option>
            <option value='3'>Choice 3</option>
            <option value='4'>Choice 4</option>
            <option value='5'>Choice 5</option>
        </select>
    </body>
</html>