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

时间:2018-02-28 08:41:46

标签: javascript jquery

我为你面对一个有趣的问题!

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

5 个答案:

答案 0 :(得分:2)

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

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部分添加了一个。

答案 1 :(得分:0)

你可以试试这个

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

答案 2 :(得分:0)

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

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

您也可以使用名称选择器

将选择限制为特定名称
var selectedOption= $('select[name=cars]').val();

如果要在第一个查询中使用提取的名称,请使用:

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

答案 3 :(得分:0)

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

请参阅: https://jsfiddle.net/9oj3ufL0/6/

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

答案 4 :(得分:0)

我更新了你的小提琴 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);
 });
});