Question 330217 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Getting Select Dropdown Info from a Function

I’m using a button to grab select option values that are within the same row. If I were to add a function to the select dropdown, I get these values:

enter image description here

When I add another button to grab these values, I can’t quite get the same information. It looks like this:

enter image description here

The getValue is just the variable holding the information. If I do getValue[0], it grabs the 0: select#manufacturer_1… but I want to replicate the first image where it has all of those values at the base level.

<table>
  <tr>
    <td>
      <select class="manufactor-selector-dropdown">
        <option>Manufactor1</option>
        <option>Manufactor2</option>
        <option>Manufactor3</option>
        ...
      </select>
    </td>
    <td>
       <button>Select Values </button>
    </td>
  </tr>
 </table>

javascript:

function(n) {
   var getValue = $(n).parents('tr').find('td .manufactor-selector-dropdown');
   var getSelectedValue = getValue.val();
}
Tags:

2

Answers


  1. 0

    It is quite difficult to understand your problem, could you please explain more.

    Login or Signup to reply.
  2. 0

    I am partly guessing as to what your intended result is supposed to be. Maybe the following is helpful?

    function getVals(ev){
  var getAllOptionValues = $(ev.target).parents('tr').find('td .manufactor-selector-dropdown option')
      .map((i,o)=>o.value).get();
  console.log(getAllOptionValues);
}

$("button").click(getVals)
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>


<table>
  <tr>
    <td>
      <select class="manufactor-selector-dropdown">
        <option>Manufactor1</option>
        <option>Manufactor2</option>
        <option>Manufactor3</option>
      </select>
    </td>
    <td>
       <button>Select Values </button>
    </td>
  </tr>
  <tr>
    <td>
      <select class="manufactor-selector-dropdown">
        <option>Supplier1</option>
        <option>Supplier2</option>
        <option>Supplier3</option>
      </select>
    </td>
    <td>
       <button>Select Values </button>
    </td>
  </tr>
 </table>

    I changed your "function" quite a bit. It now looks for the parent element of the clicked button, then goes down and collects all options of the element with class "manufactor-selector-dropdown option" that is under a "td" element. with the jQuery method .map() I then extract all their values and convert the jQuery object into an array with .get().

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search