Append the selected value using javascript

Question

I need a javascript function for my project which will append the selected value on current value. For example, I am using following code

var select = document.getElementById('cmbitems');
var input = document.getElementById('txtprice');
select.onchange = function() {
  input.value = select.value;
}

<select name="cmbitems" id="cmbitems">
    <option value="price1">blue</option>
    <option value="price2">green</option>
    <option value="price3">red</option>
</select>
<input type="text" name="txtprice" id="txtprice" onClick="checkPrice()">

It displays one selected value. I need to append selected value to previously selected value, if I select 'blue' first and then 'green', it should display "blue,green". If I select red after that, it should display "blue,green,red"

Any help would be appreciated, thanks in advance!

@UpendraJoshi: Get the value as described in the duplicate, then use `input.value +=`. — Cerbrus, May 16 '17 at 07:53
what if you select 'blue' first, 'green' second, 'red' third, and 'blue' again the fourth time? What should the text input display then? 'blue,green,red,blue'? just trying to understand. i'm assuming you need a javascript function — kimbaudi, May 16 '17 at 07:56
@UpendraJoshi - Code has been provided here - https://jsfiddle.net/efk8fmy8/6/ — Faizal, May 16 '17 at 08:02
Looks like someone already provided the solution. You should mark it as accepted. — kimbaudi, May 16 '17 at 08:03

score 1 · Accepted Answer · answered May 16 '17 at 07:55

1

This will return the selected text as your requested.

var select = document.getElementById('cmbitems');
var input = document.getElementById('txtprice');
select.onchange = function() {
    input.value = input.value + (input.value.length > 0 ? "," : "") + select.options[select.selectedIndex].text
}

<select name="cmbitems" id="cmbitems">
    <option value="price1">blue</option>
    <option value="price2">green</option>
    <option value="price3">red</option>
</select>
<input type="text" name="txtprice" id="txtprice" onClick="checkPrice()">

answered May 16 '17 at 07:55

Carsten Løvbo Andersen

25,262
9
45
70

Care to explain the downvote? – Carsten Løvbo Andersen May 16 '17 at 07:56
yeah, i was just wondering about that too?. I voted the answer up.. – Rachel Gallen May 16 '17 at 07:57
@RachelGallen Thanks for the vote, I think someone downvoted because it been marked as a duplicate, but at the time I started to answer it was not. that's why I went through with it. – Carsten Løvbo Andersen May 16 '17 at 07:58
happens to me sometimes too.. annoying that! – Rachel Gallen May 16 '17 at 08:00
1

@RachelGallen But hey, can't change it, if someone feels like downvoting it then fine. Thanks for your vote anyway. – Carsten Løvbo Andersen May 16 '17 at 08:00
always happy to vote up a good answer.. :) – Rachel Gallen May 16 '17 at 08:01
@CarstenLøvboAndersen thanks alot! it worked! – Upendra Joshi May 16 '17 at 08:05
So, even though you _know_ it's a duplicate, you still go ahead and continue working on the answer... Sure, this answer works, it's correct and everything, we shouldn't be encouraging _no-research_ questions by answering them. – Cerbrus May 16 '17 at 08:08
I searched but I didn't find what i wanted so i asked the question – Upendra Joshi May 16 '17 at 08:10
@Cerbrus No, I didn't know it was an updated. I didn't notice the Duplicate mark before after I posted the answer. – Carsten Løvbo Andersen May 16 '17 at 08:10
Removing the answer is always an option. – Cerbrus May 16 '17 at 08:10

Append the selected value using javascript

1 Answers1