如何获取选择类型名称和选定值

Question

我正面临一个有趣的问题！

使用JQuery我想获取select类型的name属性和所选选项的值。在这个例子中我想要这个结果

var selectTypeName = "cars"
var selectedOption = "volvo"

谢谢 ！

$( "select" )
  .change(function() {
    var str = "";
    $( "select option:selected" ).each(function() {
      str += $( this ).text() + " ";
    });
    $( "div" ).text( str );
  })
  .trigger( "change" );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/action_page.php">
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>

Answer 1

我已经更新了你的小提琴：

https://jsfiddle.net/9oj3ufL0/12/

$( "select" )
  .change(function() {
    var str = "";
    $( "select option:selected" ).each(function() {
        var selectTypeName = $(this).closest("select").attr("name");
      var selectedOption = $( this ).text();
      str += "selectTypeName: " + selectTypeName + ",  selectedOption:" + selectedOption + " ";
    });
    $( "div" ).text( str );
  })
  .trigger( "change" );

我在html部分添加了一个。

Answer 2

你可以试试这个

var selectTypeName = $("SELECTOR").attr('name');
var selectTypeName = $("SELECTOR").val();

Answer 3

使用attr获取您需要的任何属性：

var selectTypeName = $("select").attr("name");

您也可以使用名称选择器将选择限制为特定名称：

var selectedOption= $('select[name=cars]').val();

如果要在第一个查询中使用提取的名称，请使用以下命令：

var selectedOption= $('select[name=' + selectTypeName +' ]').val();

Answer 4

你的JS代码是正确的。您没有尝试在HTML中填充的div。

见：https://jsfiddle.net/9oj3ufL0/6/

<form action="/action_page.php">
    <div>
    </div>
    <select name="cars">

Answer 5

我更新了你的小提琴https://jsfiddle.net/9oj3ufL0/22/

$(document).ready(function(){
$( "select" ).change(function() {
var str = "";
var name="";
$( "select option:selected" ).each(function() {
  str += $( this ).text() + " ";
  name=$(this).parent().attr("name");
});
 alert(name);
 });
});