Question

您好我只是出于某种原因使用React JS测试jQuery。但面对这样的问题。当我在控制台中尝试这个时

$(".cities-container select").val()

我得到了这个

Uncaught TypeError: $(...).val is not a function

但是当我尝试这个时

$(".cities-container select")

我在控制台中获得了整个select元素，意味着jQuery正在运行但不是.val方法

任何建议......？

Answer 1

试试这个： -

$(".cities-container select")[0].value

这可以解决您的问题。

Answer 2

jQuery选择器经常返回一个元素数组。尝试获取第一个元素，如下所示：

$(".cities-container select")[0].val()

或使用.get()方法：

$(".cities-container select").get(0).val()

Answer 3

当jQuery未处于活动状态时，您将$作为document.querySelector的别名。这意味着使用$(".cities-container select").value而不是jQuery的$(".cities-container select").val()。

通过检查jQuery版本不是undefined（请参阅代码片段）或尝试使用jQuery函数在控制台中创建新的jQuery实例来检查是否加载了jQuery库

参考文献： https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference

$(document).ready(
  function() {
    var selectOpt = $("#select-opt").val();

    console.log(selectOpt);
  }
);

var jQueryNotActivated = $().jquery == undefined; // jquery alias isn't active

if(jQueryNotActivated) {
  // In chrome, $ is alias for document.querySelector
  var selectOptwithdQS = $("#select-opt");
  console.log(selectOptwithdQS.value);  
}

<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">  </script>
</head>


<body>
  <select id="select-opt">
    <option val="bus">Bus</option>
    <option val="box">Box</option>
  </select>
</body>

在反应JS中使用jQuery

3 个答案: