How to iterated through selected s in ? [duplicate]

This question already has an answer here:

Get value of multiselect box using jQuery or pure JS

7 answers

There are many question already existing similar to this topic however I can't find any that address this specific problem.

If I have a <select> element where multiple selections are allowed, how can I iterate ONLY through ones that the user has SELECTED.

jQuery and/or Vanilla accepted.

select{

    overflow:auto;

    width: 150px;

}

<select id="the_select" size="5" multiple>

  <option>Bob</option>

  <option>John</option>

  <option>Sam</option>

  <option>Jason</option>

  <option>Sarah</option>

</select>

http://jsfiddle.net/mtg73Lep/

Similar Posts that don't help:

Iterate through <select> options - For all options, not just selected ones

How to check if an item is selected from an HTML drop down list? - Doesn't work for multiple selections

edited Jan 1 at 17:53

asked Jan 1 at 17:38

JBis

302414

marked as duplicate by mplungjan html
Users with the html badge can single-handedly close html questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 1 at 17:46

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

2

You must have searched inefficiently

– mplungjan
Jan 1 at 17:45

@mplungjan My bad. Thanks

– JBis
Jan 1 at 17:52

jsfiddle.net/mplungjan/k39nj8vw $("#the_select").on("change",function() { console.log( $("option:selected",this).map(function() { return $(this).val() } ).get() ) });

– mplungjan
Jan 1 at 17:52

add a comment |

This question already has an answer here:

Get value of multiselect box using jQuery or pure JS

7 answers

There are many question already existing similar to this topic however I can't find any that address this specific problem.

If I have a <select> element where multiple selections are allowed, how can I iterate ONLY through ones that the user has SELECTED.

jQuery and/or Vanilla accepted.

select{

    overflow:auto;

    width: 150px;

}

<select id="the_select" size="5" multiple>

  <option>Bob</option>

  <option>John</option>

  <option>Sam</option>

  <option>Jason</option>

  <option>Sarah</option>

</select>

http://jsfiddle.net/mtg73Lep/

Similar Posts that don't help:

Iterate through <select> options - For all options, not just selected ones

How to check if an item is selected from an HTML drop down list? - Doesn't work for multiple selections

edited Jan 1 at 17:53

asked Jan 1 at 17:38

JBis

302414

marked as duplicate by mplungjan html
Users with the html badge can single-handedly close html questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 1 at 17:46

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

2

You must have searched inefficiently

– mplungjan
Jan 1 at 17:45

@mplungjan My bad. Thanks

– JBis
Jan 1 at 17:52

jsfiddle.net/mplungjan/k39nj8vw $("#the_select").on("change",function() { console.log( $("option:selected",this).map(function() { return $(this).val() } ).get() ) });

– mplungjan
Jan 1 at 17:52

add a comment |

This question already has an answer here:

Get value of multiselect box using jQuery or pure JS

7 answers

There are many question already existing similar to this topic however I can't find any that address this specific problem.

If I have a <select> element where multiple selections are allowed, how can I iterate ONLY through ones that the user has SELECTED.

jQuery and/or Vanilla accepted.

select{

    overflow:auto;

    width: 150px;

}

<select id="the_select" size="5" multiple>

  <option>Bob</option>

  <option>John</option>

  <option>Sam</option>

  <option>Jason</option>

  <option>Sarah</option>

</select>

http://jsfiddle.net/mtg73Lep/

Similar Posts that don't help:

Iterate through <select> options - For all options, not just selected ones

How to check if an item is selected from an HTML drop down list? - Doesn't work for multiple selections

edited Jan 1 at 17:53

asked Jan 1 at 17:38

JBis

302414

This question already has an answer here:

Get value of multiselect box using jQuery or pure JS

7 answers

There are many question already existing similar to this topic however I can't find any that address this specific problem.

If I have a <select> element where multiple selections are allowed, how can I iterate ONLY through ones that the user has SELECTED.

jQuery and/or Vanilla accepted.

select{

    overflow:auto;

    width: 150px;

}

<select id="the_select" size="5" multiple>

  <option>Bob</option>

  <option>John</option>

  <option>Sam</option>

  <option>Jason</option>

  <option>Sarah</option>

</select>

http://jsfiddle.net/mtg73Lep/

Similar Posts that don't help:

Iterate through <select> options - For all options, not just selected ones

How to check if an item is selected from an HTML drop down list? - Doesn't work for multiple selections

This question already has an answer here:

Get value of multiselect box using jQuery or pure JS

7 answers

select{

    overflow:auto;

    width: 150px;

}

<select id="the_select" size="5" multiple>

  <option>Bob</option>

  <option>John</option>

  <option>Sam</option>

  <option>Jason</option>

  <option>Sarah</option>

</select>

select{

    overflow:auto;

    width: 150px;

}

<select id="the_select" size="5" multiple>

  <option>Bob</option>

  <option>John</option>

  <option>Sam</option>

  <option>Jason</option>

  <option>Sarah</option>

</select>

javascript jquery html

edited Jan 1 at 17:53

asked Jan 1 at 17:38

JBis

302414

edited Jan 1 at 17:53

asked Jan 1 at 17:38

JBis

302414

edited Jan 1 at 17:53

asked Jan 1 at 17:38

JBis

302414

asked Jan 1 at 17:38

JBis

302414

asked Jan 1 at 17:38

JBis

302414

marked as duplicate by mplungjan html
Users with the html badge can single-handedly close html questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 1 at 17:46

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

marked as duplicate by mplungjan html
Users with the html badge can single-handedly close html questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
Jan 1 at 17:46

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

2

You must have searched inefficiently

– mplungjan
Jan 1 at 17:45

@mplungjan My bad. Thanks

– JBis
Jan 1 at 17:52

jsfiddle.net/mplungjan/k39nj8vw $("#the_select").on("change",function() { console.log( $("option:selected",this).map(function() { return $(this).val() } ).get() ) });

– mplungjan
Jan 1 at 17:52

add a comment |

2

You must have searched inefficiently

– mplungjan
Jan 1 at 17:45

@mplungjan My bad. Thanks

– JBis
Jan 1 at 17:52

jsfiddle.net/mplungjan/k39nj8vw $("#the_select").on("change",function() { console.log( $("option:selected",this).map(function() { return $(this).val() } ).get() ) });

– mplungjan
Jan 1 at 17:52

You must have searched inefficiently

– mplungjan
Jan 1 at 17:45

@mplungjan My bad. Thanks

– JBis
Jan 1 at 17:52

jsfiddle.net/mplungjan/k39nj8vw

$("#the_select").on("change",function() {   console.log(    $("option:selected",this).map(function() { return $(this).val() } ).get()   ) });

– mplungjan
Jan 1 at 17:52

jsfiddle.net/mplungjan/k39nj8vw

$("#the_select").on("change",function() {   console.log(    $("option:selected",this).map(function() { return $(this).val() } ).get()   ) });

– mplungjan
Jan 1 at 17:52

add a comment |

1 Answer
1

active

oldest

votes

Try this:

$('select').change(function(){

  $('option:selected').each(function(){

    alert( $(this).text() );

  });

});

select{

    overflow:auto;

    width: 150px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<select id="the_select" size="5" multiple>

  <option>Bob</option>

  <option>John</option>

  <option>Sam</option>

  <option>Jason</option>

  <option>Sarah</option>

</select>

Another excellent (better? definitely cooler!) suggestion, by resident j-Maven mplungjan:

$("#the_select").on("change",function() { 

    console.log( $("option:selected",this).map(function() { return $(this).val() } ).get() ) 

});

edited Jan 2 at 17:04

answered Jan 1 at 17:47

gibberish

21.4k105782

1

$("#the_select").on("change",function() { console.log( $("option:selected",this).map(function() { return $(this).val() } ).get() ) });

– mplungjan
Jan 1 at 17:54

Excellent code suggestion - many thanks. Love the Ask-Me-A-Question service on your personal site - best regards for 2019!

– gibberish
Jan 2 at 17:10

Yw- it’s a continuation from irt.org - have answered a million+ questions since ‘97

– mplungjan
Jan 2 at 17:12

And thanks for the kind words

– mplungjan
Jan 2 at 19:01

add a comment |

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Try this:

$('select').change(function(){

  $('option:selected').each(function(){

    alert( $(this).text() );

  });

});

select{

    overflow:auto;

    width: 150px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<select id="the_select" size="5" multiple>

  <option>Bob</option>

  <option>John</option>

  <option>Sam</option>

  <option>Jason</option>

  <option>Sarah</option>

</select>

Another excellent (better? definitely cooler!) suggestion, by resident j-Maven mplungjan:

$("#the_select").on("change",function() { 

    console.log( $("option:selected",this).map(function() { return $(this).val() } ).get() ) 

});

edited Jan 2 at 17:04

answered Jan 1 at 17:47

gibberish

21.4k105782

1

$("#the_select").on("change",function() { console.log( $("option:selected",this).map(function() { return $(this).val() } ).get() ) });

– mplungjan
Jan 1 at 17:54

Excellent code suggestion - many thanks. Love the Ask-Me-A-Question service on your personal site - best regards for 2019!

– gibberish
Jan 2 at 17:10

Yw- it’s a continuation from irt.org - have answered a million+ questions since ‘97

– mplungjan
Jan 2 at 17:12

And thanks for the kind words

– mplungjan
Jan 2 at 19:01

add a comment |

Try this:

$('select').change(function(){

  $('option:selected').each(function(){

    alert( $(this).text() );

  });

});

select{

    overflow:auto;

    width: 150px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<select id="the_select" size="5" multiple>

  <option>Bob</option>

  <option>John</option>

  <option>Sam</option>

  <option>Jason</option>

  <option>Sarah</option>

</select>

Another excellent (better? definitely cooler!) suggestion, by resident j-Maven mplungjan:

$("#the_select").on("change",function() { 

    console.log( $("option:selected",this).map(function() { return $(this).val() } ).get() ) 

});

edited Jan 2 at 17:04

answered Jan 1 at 17:47

gibberish

21.4k105782

1

$("#the_select").on("change",function() { console.log( $("option:selected",this).map(function() { return $(this).val() } ).get() ) });

– mplungjan
Jan 1 at 17:54

Excellent code suggestion - many thanks. Love the Ask-Me-A-Question service on your personal site - best regards for 2019!

– gibberish
Jan 2 at 17:10

Yw- it’s a continuation from irt.org - have answered a million+ questions since ‘97

– mplungjan
Jan 2 at 17:12

And thanks for the kind words

– mplungjan
Jan 2 at 19:01

add a comment |

Try this:

$('select').change(function(){

  $('option:selected').each(function(){

    alert( $(this).text() );

  });

});

select{

    overflow:auto;

    width: 150px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<select id="the_select" size="5" multiple>

  <option>Bob</option>

  <option>John</option>

  <option>Sam</option>

  <option>Jason</option>

  <option>Sarah</option>

</select>

Another excellent (better? definitely cooler!) suggestion, by resident j-Maven mplungjan:

$("#the_select").on("change",function() { 

    console.log( $("option:selected",this).map(function() { return $(this).val() } ).get() ) 

});

edited Jan 2 at 17:04

answered Jan 1 at 17:47

gibberish

21.4k105782

Try this:

$('select').change(function(){

  $('option:selected').each(function(){

    alert( $(this).text() );

  });

});

select{

    overflow:auto;

    width: 150px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<select id="the_select" size="5" multiple>

  <option>Bob</option>

  <option>John</option>

  <option>Sam</option>

  <option>Jason</option>

  <option>Sarah</option>

</select>

Another excellent (better? definitely cooler!) suggestion, by resident j-Maven mplungjan:

$("#the_select").on("change",function() { 

    console.log( $("option:selected",this).map(function() { return $(this).val() } ).get() ) 

});

$('select').change(function(){

  $('option:selected').each(function(){

    alert( $(this).text() );

  });

});

select{

    overflow:auto;

    width: 150px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<select id="the_select" size="5" multiple>

  <option>Bob</option>

  <option>John</option>

  <option>Sam</option>

  <option>Jason</option>

  <option>Sarah</option>

</select>

$('select').change(function(){

  $('option:selected').each(function(){

    alert( $(this).text() );

  });

});

select{

    overflow:auto;

    width: 150px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<select id="the_select" size="5" multiple>

  <option>Bob</option>

  <option>John</option>

  <option>Sam</option>

  <option>Jason</option>

  <option>Sarah</option>

</select>

edited Jan 2 at 17:04

answered Jan 1 at 17:47

gibberish

21.4k105782

edited Jan 2 at 17:04

answered Jan 1 at 17:47

gibberish

21.4k105782

answered Jan 1 at 17:47

gibberish

21.4k105782

answered Jan 1 at 17:47

gibberish

21.4k105782

1

$("#the_select").on("change",function() { console.log( $("option:selected",this).map(function() { return $(this).val() } ).get() ) });

– mplungjan
Jan 1 at 17:54

Excellent code suggestion - many thanks. Love the Ask-Me-A-Question service on your personal site - best regards for 2019!

– gibberish
Jan 2 at 17:10

Yw- it’s a continuation from irt.org - have answered a million+ questions since ‘97

– mplungjan
Jan 2 at 17:12

And thanks for the kind words

– mplungjan
Jan 2 at 19:01

add a comment |

1

$("#the_select").on("change",function() { console.log( $("option:selected",this).map(function() { return $(this).val() } ).get() ) });

– mplungjan
Jan 1 at 17:54

Excellent code suggestion - many thanks. Love the Ask-Me-A-Question service on your personal site - best regards for 2019!

– gibberish
Jan 2 at 17:10

Yw- it’s a continuation from irt.org - have answered a million+ questions since ‘97

– mplungjan
Jan 2 at 17:12

And thanks for the kind words

– mplungjan
Jan 2 at 19:01

$("#the_select").on("change",function() {   console.log(    $("option:selected",this).map(function() { return $(this).val() } ).get()   ) });

– mplungjan
Jan 1 at 17:54

$("#the_select").on("change",function() {   console.log(    $("option:selected",this).map(function() { return $(this).val() } ).get()   ) });

– mplungjan
Jan 1 at 17:54

Excellent code suggestion - many thanks. Love the Ask-Me-A-Question service on your personal site - best regards for 2019!

– gibberish
Jan 2 at 17:10

Yw- it’s a continuation from irt.org - have answered a million+ questions since ‘97

– mplungjan
Jan 2 at 17:12

And thanks for the kind words

– mplungjan
Jan 2 at 19:01

add a comment |

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk