jQuery get Select 选项值显示未定义错误

Posted 2023-05-09

技术标签:

【中文标题】jQuery get Select 选项值显示未定义错误【英文标题】：jQuery get Select option value shows Undefined error 【发布时间】：2018-04-26 20:47:04 【问题描述】：

我正在以 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.

编辑：所以它尝试了这个，它现在实际上给了我一个价值，但即使我选择了其他东西，它也只会给我下拉列表中的第一个选项。 $('#practitionerID :selected').val();

我能想到的唯一一件事就是把它绊倒是我在模态中加载它的事实？也许由于某种原因它无法读入它来查看该属性？

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

任何帮助将不胜感激！

【问题讨论】：

Get selected value in dropdown list using javascript?的可能重复听起来你是在元素存在之前检查。 val() never returns null or undefined when selector is a form control and it exists when called.返回字符串（如果选择多个则返回数组） @ncardeli 它还不是真正的选定值。当我从下拉列表中选择它时，我试图根据值进行设置。这与那个人不是同一个问题，因为他们正在寻找实际的“选定”参数，而我现在还没有。 @charlietfl 我想你可能会在那里做一些事情，我回家后会检查我的代码。 【参考方案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>

【讨论】：

所以这可以独立工作，但在我的代码中它不起作用。 charlietf 可能在尚未加载但不确定如何加载的地方。因此，模式中的字段是由 php 脚本生成的，在我单击“添加”按钮之前它就在屏幕上，这只是一个提交。我打算再玩一些东西，很快就会更新。由于某种原因，实际值始终是下拉列表中的第一个。事件虽然上面的代码有效，但在我的列表中，它似乎并不关心选择了哪个，它总是给出第一项的值。有人对此有什么想法吗？【参考方案2】：

我是个彻头彻尾的白痴。

对我有用的解决方案是