Styjun

RegEx with d doesn’t work in if-else statement with [[

Hotel booking: Why is Agoda much cheaper than booking.com?

Driving a school bus in the USA

Why is choosing a suitable thermodynamic potential important?

Largest memory peripheral for Sinclair ZX81?

How would fantasy dwarves exist, realistically?

Using `printf` to print variable containing `%` percent sign results in "bash: printf: `p': invalid format character"

Working hours and productivity expectations for game artists and programmers

FIFO data structure in pure C

Is it possible to determine from only a photo of a cityscape whether it was taken close with wide angle or from a distance with zoom?

Prints each letter of a string in different colors. C#

multicol package causes underfull hbox

When did Britain learn about the American Declaration of Independence?

How to customize the pie chart background in PowerPoint?

How to pipe results multiple results into a command?

Random Numbers and Variables in Latex

How come Arya Stark wasn't hurt by this in Game of Thrones Season 8 Episode 5?

Gambler's Fallacy Dice

Quotient of Three Dimensional Torus by Permutation on Coordinates

pwaS eht tirsf dna tasl setterl fo hace dorw

Why using a variable as index of a list-item does not retrieve that item with clist_item:Nn?

Why are there five extra turns in tournament Magic?

What's is the easiest way to purchase a stock and hold it

How to draw pentagram-like shape in Latex?

Get all select values per div with multiple divs with same classname

How do you remove all the options of a select box and then add one option and select it with jQuery?Change the selected value of a drop-down list with jQueryHow can I get query string values in JavaScript?How can I select an element with multiple classes in jQuery?What's the difference between '$(this)' and 'this'?Get selected value in dropdown list using JavaScript?Get selected text from a drop-down list (select box) using jQueryGet all unique values in a JavaScript array (remove duplicates)jQuery Get Selected Option From DropdownjQuery get value of select onChange

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

1

Is there a way to get an array of all the selected values inside a div with a particular class name when having more than one div with the same class name?

<div class="mydiv">
<select name="first">
 <option value="1">One</option>
 <option value="2">Two</option>
</select>
<select name="second" ">
 <option value="1">One</option>
 <option value="2">Two</option>
</select> </div>

<div class="mydiv">
<select name="first">
 <option value="1">One</option>
 <option value="2">Two</option>
</select>
<select name="second" ">
 <option value="1">One</option>
 <option value="2">Two</option>
</select> </div>

If i do this: $(".mydiv").each(function () );

I will be looping(twice in total as I have two divs with class mydiv) through both divs which is what I want. Now I would like to get the selected values in each div for each select(first and second).

javascript jquery select

share|improve this question

edited Mar 23 at 17:33

David Milanes

asked Mar 23 at 17:23

David MilanesDavid Milanes

53

add a comment | 

0

1

Is there a way to get an array of all the selected values inside a div with a particular class name when having more than one div with the same class name?

<div class="mydiv">
<select name="first">
 <option value="1">One</option>
 <option value="2">Two</option>
</select>
<select name="second" ">
 <option value="1">One</option>
 <option value="2">Two</option>
</select> </div>

<div class="mydiv">
<select name="first">
 <option value="1">One</option>
 <option value="2">Two</option>
</select>
<select name="second" ">
 <option value="1">One</option>
 <option value="2">Two</option>
</select> </div>

If i do this: $(".mydiv").each(function () );

I will be looping(twice in total as I have two divs with class mydiv) through both divs which is what I want. Now I would like to get the selected values in each div for each select(first and second).

javascript jquery select

share|improve this question

edited Mar 23 at 17:33

David Milanes

asked Mar 23 at 17:23

David MilanesDavid Milanes

53

add a comment | 

Is there a way to get an array of all the selected values inside a div with a particular class name when having more than one div with the same class name?

<div class="mydiv">
<select name="first">
 <option value="1">One</option>
 <option value="2">Two</option>
</select>
<select name="second" ">
 <option value="1">One</option>
 <option value="2">Two</option>
</select> </div>

<div class="mydiv">
<select name="first">
 <option value="1">One</option>
 <option value="2">Two</option>
</select>
<select name="second" ">
 <option value="1">One</option>
 <option value="2">Two</option>
</select> </div>

If i do this: $(".mydiv").each(function () );

I will be looping(twice in total as I have two divs with class mydiv) through both divs which is what I want. Now I would like to get the selected values in each div for each select(first and second).

javascript jquery select

share|improve this question

edited Mar 23 at 17:33

David Milanes

asked Mar 23 at 17:23

David MilanesDavid Milanes

53

<div class="mydiv">
<select name="first">
 <option value="1">One</option>
 <option value="2">Two</option>
</select>
<select name="second" ">
 <option value="1">One</option>
 <option value="2">Two</option>
</select> </div>

<div class="mydiv">
<select name="first">
 <option value="1">One</option>
 <option value="2">Two</option>
</select>
<select name="second" ">
 <option value="1">One</option>
 <option value="2">Two</option>
</select> </div>

share|improve this question

edited Mar 23 at 17:33

David Milanes

asked Mar 23 at 17:23

David MilanesDavid Milanes

53

share|improve this question

edited Mar 23 at 17:33

David Milanes

asked Mar 23 at 17:23

David MilanesDavid Milanes

53

asked Mar 23 at 17:23

David MilanesDavid Milanes

53

asked Mar 23 at 17:23

David MilanesDavid Milanes

53

1 Answer
1

active

oldest

votes

0

You can use map().

Following assumes you want a sub array for each <div>

let res = $('.mydiv').map(function()
 return [$(this).find('select').map(function()
 return $(this).val()
 ).get()]
).get()

console.log(res)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydiv">
 <select name="first">
 <option value="1" selected>One</option>
 <option value="2">Two</option>
 </select>
 <select name="second">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
</div>

<div class="mydiv">
 <select name="first">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
 <select name="second">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
</div>

For a flat array just do :

let res = $('.mydiv select').map(function()
 return $(this).val();
).get();

share|improve this answer

answered Mar 23 at 17:33

charlietflcharlietfl

143k1395126

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This is exactly what I wanted to achieve. Thank you :)
  
  – David Milanes
  Mar 23 at 17:43
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55316431%2fget-all-select-values-per-div-with-multiple-divs-with-same-classname%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

You can use map().

Following assumes you want a sub array for each <div>

let res = $('.mydiv').map(function()
 return [$(this).find('select').map(function()
 return $(this).val()
 ).get()]
).get()

console.log(res)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydiv">
 <select name="first">
 <option value="1" selected>One</option>
 <option value="2">Two</option>
 </select>
 <select name="second">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
</div>

<div class="mydiv">
 <select name="first">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
 <select name="second">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
</div>

For a flat array just do :

let res = $('.mydiv select').map(function()
 return $(this).val();
).get();

share|improve this answer

answered Mar 23 at 17:33

charlietflcharlietfl

143k1395126

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This is exactly what I wanted to achieve. Thank you :)
  
  – David Milanes
  Mar 23 at 17:43
  

  
  
  
  

add a comment | 

0

You can use map().

Following assumes you want a sub array for each <div>

let res = $('.mydiv').map(function()
 return [$(this).find('select').map(function()
 return $(this).val()
 ).get()]
).get()

console.log(res)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydiv">
 <select name="first">
 <option value="1" selected>One</option>
 <option value="2">Two</option>
 </select>
 <select name="second">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
</div>

<div class="mydiv">
 <select name="first">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
 <select name="second">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
</div>

For a flat array just do :

let res = $('.mydiv select').map(function()
 return $(this).val();
).get();

share|improve this answer

answered Mar 23 at 17:33

charlietflcharlietfl

143k1395126

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  This is exactly what I wanted to achieve. Thank you :)
  
  – David Milanes
  Mar 23 at 17:43
  

  
  
  
  

add a comment | 

You can use map().

Following assumes you want a sub array for each <div>

let res = $('.mydiv').map(function()
 return [$(this).find('select').map(function()
 return $(this).val()
 ).get()]
).get()

console.log(res)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydiv">
 <select name="first">
 <option value="1" selected>One</option>
 <option value="2">Two</option>
 </select>
 <select name="second">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
</div>

<div class="mydiv">
 <select name="first">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
 <select name="second">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
</div>

For a flat array just do :

let res = $('.mydiv select').map(function()
 return $(this).val();
).get();

share|improve this answer

answered Mar 23 at 17:33

charlietflcharlietfl

143k1395126

let res = $('.mydiv').map(function()
 return [$(this).find('select').map(function()
 return $(this).val()
 ).get()]
).get()

console.log(res)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydiv">
 <select name="first">
 <option value="1" selected>One</option>
 <option value="2">Two</option>
 </select>
 <select name="second">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
</div>

<div class="mydiv">
 <select name="first">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
 <select name="second">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
</div>

let res = $('.mydiv select').map(function()
 return $(this).val();
).get();

let res = $('.mydiv').map(function()
 return [$(this).find('select').map(function()
 return $(this).val()
 ).get()]
).get()

console.log(res)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydiv">
 <select name="first">
 <option value="1" selected>One</option>
 <option value="2">Two</option>
 </select>
 <select name="second">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
</div>

<div class="mydiv">
 <select name="first">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
 <select name="second">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
</div>

let res = $('.mydiv').map(function()
 return [$(this).find('select').map(function()
 return $(this).val()
 ).get()]
).get()

console.log(res)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydiv">
 <select name="first">
 <option value="1" selected>One</option>
 <option value="2">Two</option>
 </select>
 <select name="second">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
</div>

<div class="mydiv">
 <select name="first">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
 <select name="second">
 <option value="1">One</option>
 <option value="2" selected>Two</option>
 </select>
</div>

share|improve this answer

answered Mar 23 at 17:33

charlietflcharlietfl

143k1395126

answered Mar 23 at 17:33

charlietflcharlietfl

143k1395126

answered Mar 23 at 17:33

charlietflcharlietfl

143k1395126