Question

我正在以bootstrap 3模式弹出窗口中的形式生成Html选择。我正在尝试获取所选值并将其传递给JQuery以转储到数据库。

我有其他输入字段和使用tinyMCE的文本区域字段，我可以使用$('#id').val();从中获取值而不会出现任何问题。

我的选择非常简单，并在视图源中显示为：

<select id='practitionerID' name='practitionerID' class='form-control'>
    <option value="1">Doctor 1</option>
    <option value="2">Doctor 2</option>
</select>

我已经尝试了许多不同的方法来显示数据，并且在我的生活中无法获得选项值。

我尝试了以下内容：

$('#practitionerID').prop('selectedIndex'); // give's me -1 no matter the option selected
$('#practitionerID').val(); // returns null
$('#practitionerID').text(); // returns null, dont want the text anyways
$("#practitionerID option:selected").val(); // returns undefined
$("#practitionerID option:selected" ).text(); //returns undefined, still not what i want.

编辑：所以它尝试了这个，它实际上给了我一个价值，但只有永远给我下拉列表中的第一个选项，即使我已经选择了其他东西。 $（＆＃39; #practitionerID：selected＆＃39;）。val（）;

我唯一可以想到的是绊倒这个事实是我在一个模态加载它？也许它出于某种原因无法读入该属性？

当我加载现有记录并获取data.event.practitionerID时，它的工作价值很高。但是，当我得到它时，我似乎无法设置值。所以它似乎是这个选择的ID的问题，但我不知道在哪里或如何。

非常感谢任何帮助！

Answer 1

希望这会有所帮助......

$( "#select" ).submit(function( event ) {
  var select=$('#practitionerID').val();
  alert( select );
  event.preventDefault();
});

<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">

<!-- Button to trigger modal -->
<a href="#myModal" class="btn btn-primary" data-toggle="modal">Launch demo modal</a>
 
  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
         <form id="select">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
          <h4 class="modal-title">Select!</h4>
        </div>
        <div class="modal-body">
       
            <select id='practitionerID' name='practitionerID' class='form-control'>
    <option value="1">Doctor 1</option>
    <option value="2">Doctor 2</option>
</select>
          
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Submit</button>
        </div>
      </div><!-- /.modal-content -->
    </form>
      </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  
  
</div>
</body>
</html>

Answer 2

我是一个完全白痴。

对我有用的解决方案是

$('#practitionerID').val();

问题是我在同一页面上有一个快速添加功能并猜测我使用的是一个具有相同ID的下拉菜单。它每次都从第一次下降中获取值。

我希望这个错误可以帮助别人。

Answer 3

我试图通过ID获取选定的值。但没有运气。

然后我尝试通过选择字段名称来获取选择的值。我得到了预期的结果。

$("select[name=practitionerID]").val();

jQuery get Select选项值显示Undefined error

3 个答案: