using jQuery with React JS

Question

Hi I was just testing jQuery with React JS for some reason. But facing an issue like this. when I try this in console

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

I got this

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

But when I try this

$(".cities-container select")

I got whole select element in the console, means jQuery is working but not .val method

any suggestions...?

When you did $(".cities-container select"), what was the output? — VivekN
– VivekN, Commented Jun 22, 2017 at 9:20
$ is a shortcut for the document query selector in the browser. developer.mozilla.org/en-US/docs/Web/API/Document/querySelector — Oluwafemi Sule
– Oluwafemi Sule, Commented Jun 22, 2017 at 9:22
<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> — h_h
– h_h, Commented Jun 22, 2017 at 9:26

VivekN · Accepted Answer · 2017-06-22 09:32:06Z

2

Try this:-

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

This should resolve your problem.

answered Jun 22, 2017 at 9:32

VivekN

1,60212 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

VivekN Over a year ago

This is what you tried right $(".cities-container select")[0].value?

h_h Over a year ago

Yes I used cities

VivekN Over a year ago

@h_a86 what is the console.log for this $(".cities-container select")[0]

VivekN Over a year ago

down voting the answer is so wrong here.We are trying to help.

h_h Over a year ago

I didn't, believe me

|

Andrei Duca · Accepted Answer · 2017-06-22 13:57:14Z

1

jQuery selectors often return an array of elements. Try getting the first element, like so:

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

Or using the .get() method:

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

edited Jun 22, 2017 at 13:57

answered Jun 22, 2017 at 9:23

Andrei Duca

3922 silver badges11 bronze badges

Comments

Oluwafemi Sule · Accepted Answer · 2017-06-22 10:09:13Z

You get $ as an alias for document.querySelector when jQuery isn't active. This means using $(".cities-container select").value instead of jQuery's $(".cities-container select").val().

Check that the jQuery library is loaded by checking that jQuery version isn't undefined (see snippet for an example) or by trying to make a new jQuery instance in the console using the jQuery function.

References: 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>

Collectives™ on Stack Overflow

using jQuery with React JS

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related