Question

我在网页上添加了一个小的下拉菜单：

function addDropDownMenu() {
        var positionMenu = $(
            "<form class='drop_down_menu'>" +
                "<select name='roles'>" +
                    "<option value='notSelected'>Not Selected</option>"+
                    "<option value='relevant'>Relevant</option>"+
                    "<option value='notRelevant'>Not Relevant</option>" + 
                "</select>" +
            "</form>");

        $('#profile-experience .position').prepend(positionMenu)
    }

我正在尝试获取Relevant或Not Relevant的值。

但是，当我运行此代码时，我会一直得到一个空字符串。

var x = $('.drop_down_menu')[0]
// x is the form
$(x).val()

返回""

我错过了什么？做错了？

Answer 1

你可以试试这个：

var selectedValue = $('.drop_down_menu>select').val();

var selectedValue = $('.drop_down_menu>select').val();
console.log('The selected value is: '+ selectedValue);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class='drop_down_menu'>
  <select name='roles'>
  <option value='notSelected'>Not Selected</option>
  <option value='relevant' selected>Relevant</option>
  <option value='notRelevant'>Not Relevant</option>
  </select>
</form>

Answer 2

$('.drop_down_menu')语句返回 jquery 元素及其对应的属性和方法，但$('.drop_down_menu')[0]只返回HTML DOM 元素。

您必须使用value属性才能获得select元素的value。

console.log($('select')[0].value);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name='roles'>
  <option value='notSelected'>Not Selected</option>
  <option value='relevant' selected>Relevant</option>
  <option value='notRelevant'>Not Relevant</option>
  </select>

您的示例不起作用，因为您必须使用选择器作为选择元素

var x = $('.drop_down_menu > select')[0]
console.log($(x).val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class='drop_down_menu'>
          <select name='roles'>
              <option value='notSelected'>Not Selected</option>
              <option value='relevant' selected>Relevant</option>
              <option value='notRelevant'>Not Relevant</option> 
          </select>
</form>

Answer 3

var _val = $("[name='roles']").val();
console.log(_val);

使用jQuery获取下拉菜单的值

3 个答案: