Retrieving the current value of the selected option using JQuery

Question

Retrieving the current value of the selected option using JQuery

I am working on a feature where I have different quantities in selects after each button click.

  <button type="button" class="btn btn-sm btn-primary" id="addtocart2" >Button1</button>
                    <select  id="quantity1"  class="ml-1">

                        <option value="4">4</option>

                    </select>

                     <button type="button" class="btn btn-sm btn-primary" id="addtocart2" >Button2</button>
                    <select  id="quantity1"  class="quantity ml-1"> 

                        <option value="3">3</option>

                    </select>

In this setup, when I click Button1, I want to receive the quantity 4 and when I click on Button2, I want to receive the quantity 3.

I believe I can achieve this with the following code:

 var nextoption =   $('button[id*="addtocart"]').click(function()  { console.log($(this).closest('select').text()); });

Any help or suggestions would be greatly appreciated. Thank you!

javascript jquery html

Answer 1

Answer №1

closest() is a useful function for finding the closest parent element that matches the specified selector. However, in this case, since the select elements are siblings, you should use the next() method instead. Additionally, to retrieve the value of the selected option, you can utilize the val() method:

var nextoption = $('button[id*="addtocart"]').click(function() {
  console.log($(this).next('select').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-sm btn-primary" id="addtocart2">Button1</button>
<select id="quantity1" class="ml-1">
  <option value="4">4</option>
</select>

<button type="button" class="btn btn-sm btn-primary" id="addtocart2">Button2</button>
<select id="quantity1" class="quantity ml-1">
  <option value="3">3</option>
</select>

Answer 2

closest() is a useful function for finding the closest parent element that matches the specified selector. However, in this case, since the select elements are siblings, you should use the next() method instead. Additionally, to retrieve the value of the selected option, you can utilize the val() method:

var nextoption = $('button[id*="addtocart"]').click(function() {
  console.log($(this).next('select').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-sm btn-primary" id="addtocart2">Button1</button>
<select id="quantity1" class="ml-1">
  <option value="4">4</option>
</select>

<button type="button" class="btn btn-sm btn-primary" id="addtocart2">Button2</button>
<select id="quantity1" class="quantity ml-1">
  <option value="3">3</option>
</select>

Answer 3

Answer №2

Utilize the .next() function to access the next sibling element of the buttons and make use of the .val() method to retrieve the current value of a form field.

$("button[id*='addtocart']").on("click", function(){
  console.log($(this).next().val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-sm btn-primary" id="addtocart2" >Button1</button>
<select  id="quantity1"  class="ml-1">
   <option value="4">4</option>
</select>

<button type="button" class="btn btn-sm btn-primary" id="addtocart2" >Button2</button>
<select  id="quantity1"  class="quantity ml-1"> 
  <option value="3">3</option>
</select>

Answer 4

Utilize the .next() function to access the next sibling element of the buttons and make use of the .val() method to retrieve the current value of a form field.

$("button[id*='addtocart']").on("click", function(){
  console.log($(this).next().val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-sm btn-primary" id="addtocart2" >Button1</button>
<select  id="quantity1"  class="ml-1">
   <option value="4">4</option>
</select>

<button type="button" class="btn btn-sm btn-primary" id="addtocart2" >Button2</button>
<select  id="quantity1"  class="quantity ml-1"> 
  <option value="3">3</option>
</select>

Answer 5

Answer №3

You can utilize the :selected selector to target the currently selected option.

$('#addtocart1').click(() => {
  console.log($('#quantity1 option:selected').val());
});

$('#addtocart2').click(() => {
  console.log($('#quantity2 option:selected').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-sm btn-primary" id="addtocart1">Button1</button>
<select id="quantity1" class="ml-1">
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<button type="button" class="btn btn-sm btn-primary" id="addtocart2">Button2</button>
<select id="quantity2" class="quantity ml-1">
  <option value="4">4</option>
  <option value="3">3</option>
  <option value="2">2</option>
</select>

Answer 6

You can utilize the :selected selector to target the currently selected option.

$('#addtocart1').click(() => {
  console.log($('#quantity1 option:selected').val());
});

$('#addtocart2').click(() => {
  console.log($('#quantity2 option:selected').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-sm btn-primary" id="addtocart1">Button1</button>
<select id="quantity1" class="ml-1">
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<button type="button" class="btn btn-sm btn-primary" id="addtocart2">Button2</button>
<select id="quantity2" class="quantity ml-1">
  <option value="4">4</option>
  <option value="3">3</option>
  <option value="2">2</option>
</select>

Retrieving the current value of the selected option using JQuery

Answer №1

Answer №2

Answer №3

Similar questions

Tips on transitioning a Node.js application from JavaScript to TypeScript incrementally

What steps do I need to take to extract the date and month from a single datepicker using the code below?

"Disabling Dropzone.js functionality once a file has been selected - here's how

Determine the specific cell involved in an HTML5 drag-and-drop interaction within a table

Javascript error - SyntaxError: unexpected token '}' after property list is missing

After a push to the router, scrolling is disabled

Generating a dataframe with cells that have a combination of regular and italicized text using the sjPlot package functions

Having trouble with Google Maps Places API autocomplete feature; it's not functioning properly

How to Create Smooth Transitions for Text Arrays using jQuery's Fade In and Fade Out Features

Changes in query parameters on NextJS navigation within the same page do not activate hooks

jQuery's Multi-Category Filter feature allows users to filter content

Issues with routing on Zeit Now platform are causing a 404 NOT FOUND error when attempting to reload pages that are not the

How to style the background color of the selected option in a <select> element using

How can I implement a AJAX GET request with a parameter in ASP.Net Core 2 Razor

struggling to remove the jquery DataTable

Seeking a solution for resizing the Facebook plugin comments (fb-comments) using Angular when the window is resized

Exploring Angular modules has shed light on a certain behavior that has left me puzzled - specifically, when diving into JavaScript code that includes the

jQuery: Automatically scroll to the end of the div based on the height of the content within

What is the most effective approach to building this function in React JS rather than the existing .map method?

Ways to determine the success of $wpdb->query and retrieve the outcome