Get multiple selected text options with JavaScript

Question

How to have a hyphen between two values? This is my code:

jQuery(document).ready(function($) {
          
        $('input').val('default');   
       $('select').change(function() {
		var var_id = $(':selected').text();
		   
		   
         $('input').val(var_id);
                
            
         });
          
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<select>
	<option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
	<option value="D">D</option>
</select>

<select>
  <option value="1">1</option>
  <option value="2">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<input type="text" value="">

This is the result I received:

This is what I want:

How to have a hyphen between two values?

Any help is appreciated.

Iiskaandar · Accepted Answer · 2019-07-31 19:10:28Z

2

You can use "id" in html:

<div>
  <select id="alphabet">
    <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
    <option value="D">D</option>
</select>

<select id="id">
  <option value="1">1</option>
  <option value="2">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<input type="text" value="">
</div>

jQuery(document).ready(function($) {

        $('input').val('default');   
        $('#id').change(function() {
        const id = $('#id :selected').text();
        const alphabet = $('#alphabet :selected').text();
        $('input').val(alphabet + "-" + id);  
         });
      });

answered Jul 31, 2019 at 19:10

Iiskaandar

3942 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Morphyish · Accepted Answer · 2019-07-31 19:13:33Z

This is how I would modify your code, it gives you the expected results regardless of the content of the selected option text:

jQuery(document).ready(function($) {
          
        $('input').val('default');   
        $('select').change(function() {
		var var_id = [];
                $(':selected').each(function(index, item){
                      var_id.push(item.innerText)
                });
		   
		   
                $('input').val(var_id.join(' - '));
                
            
         });
          
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<select>
	<option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
	<option value="D">D</option>
</select>

<select>
  <option value="1">1</option>
  <option value="2">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<input type="text" value="">

Bryan · Accepted Answer · 2019-07-31 19:06:49Z

1

Here's one way to do it:

jQuery(document).ready(function($) {
    $('input').val('default');   
    $('select').change(function() {
        var var_id = $(':selected').text();
        $('input').val(var_id[0] + ' - ' + var_id[1]);
    });
});

Also, if you want to use an ES6 template literal, you can use:

$('input').val(`${var_id[0]} - ${var_id[1]}`);

answered Jul 31, 2019 at 19:06

Bryan

1,0152 gold badges8 silver badges18 bronze badges

Comments

Cue · Accepted Answer · 2019-07-31 19:09:11Z

When any select menu changes, you could push each select value and join with the hyphen delimiter.

$(document).ready(function($) {
  $('input').val('default');   
  $('select').change(function() {
    let values = [];
    $('select').each(function () {
      values.push(this.value);
    });
    $('input').val(values.join('-'))
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<select>
	<option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
	<option value="D">D</option>
</select>

<select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<input type="text" value="">

Jb31 · Accepted Answer · 2019-07-31 19:11:10Z

Instead of applying text directly to the array of elements returned by $(':selected') you can map each element to their text representation and then join the array of the text-values:

jQuery(document).ready(function($) {
          
        $('input').val('default');   
        $('select').change(function() {
          var var_id = $(':selected').map(function () {
            return $(this).text()
          }).toArray().join("-");
           
          $('input').val(var_id);
       });
          
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<select>
	<option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
	<option value="D">D</option>
</select>

<select>
  <option value="1">1</option>
  <option value="2">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<input type="text" value="">

Collectives™ on Stack Overflow

Get multiple selected text options with JavaScript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related