I don't know js. I need to get the multiple selection as ma separated from select box into a text input.

with pure js, I found only this question related on SO. Multiple selections into input box

And I tried the js code in that question. (question js bination with accepted answer)

However I couldn't achieve.

what I need is for example printing Australia,England into text input after selecting those 2 and submitting.

Fiddle link is:

/

CODE IN FIDDLE

HTML

<form>
    <select id="countries" multiple>
      <option value="val0">Australia</option>
      <option value="val1">England</option>
      <option value="val2">France</option>
    </select>
    <input type="button" value="Show Index" onclick="showSelected();" />
</form>
<p>selected countries by ma seperated</p>
<form><input type="text" id="txtText" /></form>

UNSUCCESSFUL JS

function showSelected()
{
    var selObj = document.getElementById('countries');
  var txtTextObj = document.getElementById('txtText');

  var selIndex = selObj.selectedIndex;
 txtTextObj.value += selObj.options[selIndex].text +', ';   
}

I don't know js. I need to get the multiple selection as ma separated from select box into a text input.

with pure js, I found only this question related on SO. Multiple selections into input box

And I tried the js code in that question. (question js bination with accepted answer)

However I couldn't achieve.

what I need is for example printing Australia,England into text input after selecting those 2 and submitting.

Fiddle link is:

http://jsfiddle/0k2m7gLo/

CODE IN FIDDLE

HTML

<form>
    <select id="countries" multiple>
      <option value="val0">Australia</option>
      <option value="val1">England</option>
      <option value="val2">France</option>
    </select>
    <input type="button" value="Show Index" onclick="showSelected();" />
</form>
<p>selected countries by ma seperated</p>
<form><input type="text" id="txtText" /></form>

UNSUCCESSFUL JS

function showSelected()
{
    var selObj = document.getElementById('countries');
  var txtTextObj = document.getElementById('txtText');

  var selIndex = selObj.selectedIndex;
 txtTextObj.value += selObj.options[selIndex].text +', ';   
}

• javascript
• html
• textinput
• multiple-select

• Are you able to call the JS code? – Iti Tyagi Commented Jan 21, 2015 at 14:14

2 Answers 2

You can do something like this:

var selObj = document.getElementById('countries'),
    txtTextObj = document.getElementById('txtText'),
    selected = [];

for(var i = 0, l = selObj.options.length; i < l; i++){
    //Check if the option is selected
    if(selObj.options[i].selected){
        selected.push(selObj.options[i].textContent);
    }
} 
txtTextObj.value = selected.join(', ');

jsFiddle

function updateSelected() {
  var select = document.getElementById('countries'),
      options = select.options,
      input = document.getElementById('selected');

  var selected = [];

  for (var i = 0, ii = options.length; i < ii; ++i) {
    var opt = options[i];

    if (opt.selected) {
      selected.push(opt.innerHTML);
    }
  }

  input.value = selected.join(', ');
}