-3

What is the effective way to get the value of the selected dropdown with the CLASS name in javascript/jquery?
FYI: it has just the CLASS name, not ID.

For example, let's assume that there is a dropdown like the below:

<select name="cars" class="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

One of the easy ways to get the value of the selected with jquery,

$('.cars')[0].value

sometimes, this works fine. but sometimes, this doesn't work and displays an error.
Is there a best way to get the selected value without any error?

JShobbyist
  • 532
  • 3
  • 9
  • 23
  • 1
    what's the error? – Marcus.Aurelianus Nov 04 '22 at 09:05
  • is it returning an error when no value is selected? you should have an option that's "selected" by default that says "Select a car" to avoid that – Moudi Nov 04 '22 at 09:26
  • In some cases, it displays an error ".value is not a function..." or something like that. – JShobbyist Nov 04 '22 at 09:34
  • 2
    Then you're most likely running your JS before the DOM loads, causing a race condition between the `select` being available in the DOM and trying to access it. I'd strongly suggest you use a document.ready handler, and jQuery's `val()` method, as it's just more simple. Here's what your JS code should look like: `jQuery($ => { const brand = $('.cars').val(); })`. You may need to put this within an event handler on the select itself. – Rory McCrossan Nov 04 '22 at 09:43

1 Answers1

-1

Okay, so there are 3 ways that you can get the value of a dropdown. Bellow the code shows those ways:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<select name="cars" class="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>
<script>
    //this just activates when you change the option in the select element
  $(".cars").on("change", function() {
    //the first three use jQuery, only the last one uses only DOM, pick the one you prefer
    console.log($('.cars').val()); // gets the value of the first .cars class it finds
    console.log($(".cars")[0].value);//gets the value of the first .cars class it finds, change the index if you want another one
    console.log($($('.cars')[0]).val()); //the same as above, just change the index
    console.log(document.getElementsByClassName("cars")[0].value);//the same as above, just change the index
  });
</script>
</body>
</html>

If none of these ways work then the problem could be that you are using the car class on an HTML element that doesn't have the .value property so it doesn't work, therefore I suggest you make sure you check the index when selecting an element so as to make sure you select the dropdown element you want.

Another problem could be that it loads the Javascript before the HTML code, therefore I suggest you try to put the script tags not at the top of your code but at the end just before closing the body tag(see the code I put above).

Epic-legend128
  • 34
  • 3