Using IF statements in a form to narrow choices down - javascript

I basically want to limit my choices in my form so that when a car is chosen as well as the transmission only certain colors may appear. I have created the form. The problem is creating the code in the Javascript file. I don't know how to make it so that if Car 1 is chosen as well as Automatic then for example only Black and blue appear as options. Im relatively new to coding and any help would be appreciated.
Thanks
HTML
<script src="Script\configurator.js" type="text/javascript"></script>
<form name="CarConfigurator">
<select name="Car_make" onchange="Transmission(this.value);">
<option value=" " selected="selected">None</option>
<option value="1">Audi RS6</option>
<option value="2">BMW M4</option>
<option value="3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select name="A_M" >
<option value="" selected="selected">None</option>
<option value="1" selected="selected">Automatic</option>
<option value="2" selected="selected">Manual</option>
</select>
<br>
<br>
<select name="Color">
<option value="" selected="selected">None</option>
<option value="1">Black</option>
<option value="2">Blue</option>
<option value="3">Red</option>
<option value="4">White</option>
<option value="5">Green</option>
</select>
</form>
Javascript
function Transmission(Car) {
var make = document.CarConfigurator.A_M;
make.options.length = 0;
if (Car == "1") {
make.options[make.options.length] = new Option('Automatic','1');
make.options[make.options.length] = new Option ('Manual','2');
}
if (Car =="2" ) {
make.options[make.options.length] = new Option('Manual','2');
}
if (Car == "3") {
make.options[make.options.length] = new Option('Automatic','3');
}
}


Is this what you want:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<form name="CarConfigurator">
<select name="Car_make" onchange="Transmission();">
<option value=" " selected="selected">None</option>
<option value="1">Audi RS6</option>
<option value="2">BMW M4</option>
<option value="3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select name="A_M" onchange="Transmission();">
<option value="" selected="selected">None</option>
<option value="1" selected="selected">Automatic</option>
<option value="2" selected="selected">Manual</option>
</select>
<br>
<br>
<select name="Color" onchange="ChoicesMade();">
<option value="" selected="selected">None</option>
<option value="1">Black</option>
<option value="2">Blue</option>
<option value="3">Red</option>
<option value="4">White</option>
<option value="5">Green</option>
</select>
<div id="imageContainer" style="display: none;"><img src="http://buyersguide.caranddriver.com/media/assets/submodel/6873.jpg" /></div>
</form>
<script type="text/javascript">
function Transmission() {
var Car = document.CarConfigurator.Car_make.value;
var make = document.CarConfigurator.A_M.value;
var color = document.CarConfigurator.Color;
color.options.length = 0;
if (Car == "1" && make == '1') {
color.options.add(new Option('Black', '1'));
color.options.add(new Option('Blue', '2'));
}
else if(Car == '2' && make == '1')
{
color.options.add(new Option('Red', '3'));
color.options.add(new Option('White', '4'));
}
ChoicesMade();
}
function ChoicesMade()
{
var form = document.CarConfigurator;
var car = form.Car_make.value;
var make = form.A_M.value;
var color = form.Color.value;
if(car != ' ' && make != '' && color != '')
{
var imageContainer = document.querySelector('#imageContainer');
imageContainer.style.display = 'block';
}
}
</script>
</body>
</html>


You can use objects in JavaScript and then loop through each array in object to change options. For example
var cars = {
"Audi_RS6":{
"name":"Audi RS6",
"Automatic":["color_1","color_2"],
"Manual":["color_1","color_2"]
},
"BMW_M4":{
"name":"BMW M4",
"Manual":["color_1","color_2"]
},
"Mercedes_C63_AMG":{
"name":"Mercedes C63 AMG",
"Automatic":["color_1","color_2"]
}
};
values can be accessed like this
var result = cars.Audi_RS6.Manual[1];


Here you go Duncher, this code does exactly what you want
<!DOCTYPE html>
<html><head>
<title></title>
</head>
<body>
<form name="CarConfigurator">
<select id="car" name="Car_make">
<option value="" selected="selected">Which car?</option>
<option value="car1">Audi RS6</option>
<option value="car2">BMW M4</option>
<option value="car3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select id="trans" name="A_M">
<option value="" selected="selected">What trans?</option>
<option value="auto">Automatic</option>
<option value="man">Manual</option>
</select>
<br>
<br>
<select id="color" name="Color">
<option value="" selected="selected">What Color?</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="green">Green</option>
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="configurator.js"></script>
</body>
</html>
And the JavaScript:
$("#car").change(function () {
transmission();
});
$("#trans").change(function () {
transmission();
});
function transmission() {
if ($("#car").val() == "car1" && $("#trans").val() == "auto") {
$("option[value$='red']").hide();
$("option[value$='white']").hide();
$("option[value$='green']").hide();
} else {
$("option[value$='red']").show();
$("option[value$='white']").show();
$("option[value$='green']").show();
}
}
You will have to make a few tweaks to get your other car & trans combinations working how you want them to (i.e. displaying only the colors you want) by adding more if else statements in the transmission() method but this should get you on your way. This is using jQuery by the way.
Screen shot

Related

Comparing select input values of multiple select inputs to check if a value has been selected

I'm trying to create something like a day/time preference listing. Where preference one is the first day/time set and the second preference is the second day/time set. A minimum of two pairs will be used but more can be added as well. The goal is to be able to select multiple day/time preferences but if someone selects two of the same day then they can only select only one time preference. So if I select Wednesday at 1 for the first preference, then the second can only select Wednesday at 2 or 3.
I'm kind of looking for 2 things here. I would prefer to try this using pure javascript.
First, here's the code I've come up with so far to try and accomplish the goal I'm looking to do. I want to disable the second preference time value or even clear the input but currently what I've tried doesn't seem to do either.
Second, if someone knows a cleaner more unobtrusive way to implement what I'm trying to do as well I'm up for ideas on how to get that done.
function getDays(){
var days1 = document.getElementById('pref1-day'),
days1_value = days1.options[days1.selectedIndex].value;
var days2 = document.getElementById('pref2-day'),
days2_value = days2.options[days2.selectedIndex].value;
if (days1_value === days2_value) CheckDrodowns();
}
function CheckDrodowns(){
var times = document.querySelectorAll('select.times-dropdown');
for (i = 0; i < times.length; i++) {
for (j = 0; j < times.length; j++) {
if (times[i].id != times[j].id) {
if (times[i].options[times[i].selectedIndex].value === times[j].options[times[j].selectedIndex].value) {
alert(times[i].options[times[i].selectedIndex].value);
//times[i].selected = false;
//times[j].options[times[j].selectedIndex].value = "";
return false;
}
}
}
}
return false;
}
<div>
<SELECT id="pref1-day" class="day-dropdown" style="width:150px">
<option value=""></option>
<option value="WED">WEDNESDAY</option>
<option value="THU">THURSDAY</option>
<option value="FRI">FRIDAY</option>
<option value="SAT">SATURDAY</option>
</SELECT>
<SELECT id="pref1-times" class="times-dropdown" style="width:150px" onChange="getDays()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</SELECT>
</div>
<div>
<SELECT id="pref2-day" class="day-dropdown" style="width:150px">
<option value=""></option>
<option value="WED">WEDNESDAY</option>
<option value="THU">THURSDAY</option>
<option value="FRI">FRIDAY</option>
<option value="SAT">SATURDAY</option>
</SELECT>
<SELECT id="pref2-times" class="times-dropdown" style="width:150px" onChange="getDays()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</SELECT>
</div>
Here is a jsbin link to view the html and javascript code.

I would suggest using checkboxes for an improved user experience:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
Wednesday
<input name="date" type="checkbox" value="Wednesday at 1pm">1pm</input>
<input name="date" type="checkbox" value="Wednesday at 2pm">2pm</input>
<input name="date" type="checkbox" value="Wednesday at 3pm">3pm</input>
</div>
<div>
Thursday
<input name="date" type="checkbox" value="Thursday at 1pm">1pm</input>
<input name="date" type="checkbox" value="Thursday at 2pm">2pm</input>
<input name="date" type="checkbox" value="Thursday at 3pm">3pm</input>
</div>
<div>
Friday
<input name="date" type="checkbox" value="Friday at 1pm">1pm</input>
<input name="date" type="checkbox" value="Friday at 2pm">2pm</input>
<input name="date" type="checkbox" value="Friday at 3pm">3pm</input>
</div>
<div>
Saturday
<input name="date" type="checkbox" value="Saturday at 1pm">1pm</input>
<input name="date" type="checkbox" value="Saturday at 2pm">2pm</input>
<input name="date" type="checkbox" value="Saturday at 3pm">3pm</input>
</div>
<button onClick="getDays();">Get Days</button>
</body>
</html>
JS
function getDays() {
var elements = document.getElementsByName("date");
var dates = [];
for (var i=0; i<elements.length; i++) {
if (elements[i].checked) {
dates.push(elements[i].value);
}
}
var selectedDates = dates.length > 0 ? dates.join(", ") : "No Dates Selected";
alert(selectedDates);
}
JS Bin

Try removing the time option by adding a listener when the day is selected as this :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<SELECT id="pref1-day" class="day-dropdown" style="width:150px" onChange="checkDays()">
<option value=""></option>
<option value="WED">WEDNESDAY</option>
<option value="THU">THURSDAY</option>
<option value="FRI">FRIDAY</option>
<option value="SAT">SATURDAY</option>
</SELECT>
<SELECT id="pref1-times" class="times-dropdown" style="width:150px" onChange="getDays()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</SELECT>
</div>
<div>
<SELECT id="pref2-day" class="day-dropdown" style="width:150px" onChange="checkDays()">
<option value=""></option>
<option value="WED">WEDNESDAY</option>
<option value="THU">THURSDAY</option>
<option value="FRI">FRIDAY</option>
<option value="SAT">SATURDAY</option>
</SELECT>
<SELECT id="pref2-times" class="times-dropdown" style="width:150px" onChange="getDays()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</SELECT>
</div>
</body>
</html>
JS
function getDays(){
var days1 = document.getElementById('pref1-day'),
days1_value = days1.options[days1.selectedIndex].value;
var days2 = document.getElementById('pref2-day'),
days2_value = days2.options[days2.selectedIndex].value;
if (days1_value === days2_value) CheckDrodowns();
}
function CheckDrodowns(){
var times = document.querySelectorAll('select.times-dropdown');
for (i = 0; i < times.length; i++) {
for (j = 0; j < times.length; j++) {
if (times[i].id != times[j].id) {
if (times[i].options[times[i].selectedIndex].value === times[j].options[times[j].selectedIndex].value) {
alert(times[i].options[times[i].selectedIndex].value);
return false;
}
}
}
}
return false;
}
function checkDays(){
var days1 = document.getElementById('pref1-day'),
days1_value = days1.options[days1.selectedIndex].value;
var days2 = document.getElementById('pref2-day'),
days2_value = days2.options[days2.selectedIndex].value;
if (days1_value === days2_value){
var times1 = document.getElementById('pref1-times'),
times2 = document.getElementById('pref2-times');
times2.remove(times1.selectedIndex);
}
}

To make changes in the Textarea according to the selection

I need to make a program wherein , when i select whichever font-family,font-size,background-color and text-color from the drop -down, same changes should be made to the text in the textarea. As of now, if i change the background color , only that changes, nothing else happens to the text area. Please help.
<html>
<head>
<title>Binding</title>
</head>
<body>
<script>
function changeColor() {
var newColor = document.getElementById('bgColorPicker').value;
document.bgColor = newColor;
}
function changeFont(){
var newFont=document.getElementById('fontPicker').value;
document.getElementById('textarea').style.fontStyle=newFont;
}
function changeFontSize(){
var newFontSize=document.getElementById('fontSizePicker').value;
document.getElementById('textarea').style.fontSize=newFontSize;
}
function changeTextColor(){
var newTextColor=document.getElementById('textColorPicker').value;
document.getElementById('textarea').color=newTextColor;
}
</script>
<select id="bgColorPicker" onchange="changeColor()">
<option value="transparent">--Select--</option>
<option value="#FFFF99">Yellow</option>
<option value="#0099CC">Blue</option>
<option value="limegreen"> Green</option>
</select>
<br>
<select id="fontPicker" onchange="changeFont()">
<option value="transparent">--Select--</option>
<option value="Arial">Yellow</option>
<option value="Verdana">Blue</option>
<option value="Georgia"> Green</option>
</select>
<br>
<select id="textColorPicker" onchange="changeTextColor()">
<option value="transparent">--Select--</option>
<option value="#DAA520">GoldenRod</option>
<option value="#6B8E23">OliveDrab</option>
<option value="#DC143C">Crimson</option>
</select>
<select id="fontSizePicker" onchange="changeFontSize()">
<option value="transparent">--Select--</option>
<option value="100px">Large</option>
<option value="50px">Medium</option>
<option value="20px">Small</option>
</select>
TextArea:<textarea name='textarea' rows='15' cols='50'></textarea>
</body>
</html>

You forgot to add id to the textarea
document.getElementById('textarea').color should be document.getElementById('textarea').style.color
document.getElementById('textarea').style.fontStyle should be document.getElementById('textarea').style.fontFamily
function changeColor() {
var newColor = document.getElementById('bgColorPicker').value;
document.bgColor = newColor;
}
function changeFont() {
var newFont = document.getElementById('fontPicker').value;
document.getElementById('textarea').style.fontFamily = newFont;
}
function changeFontSize() {
var newFontSize = document.getElementById('fontSizePicker').value;
document.getElementById('textarea').style.fontSize = newFontSize;
}
function changeTextColor() {
var newTextColor = document.getElementById('textColorPicker').value;
document.getElementById('textarea').style.color = newTextColor;
}
<select id="bgColorPicker" onchange="changeColor()">
<option value="transparent">--Select--</option>
<option value="#FFFF99">Yellow</option>
<option value="#0099CC">Blue</option>
<option value="limegreen"> Green</option>
</select>
<br>
<select id="fontPicker" onchange="changeFont()">
<option value="transparent">--Select--</option>
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Georgia"> Georgia</option>
</select>
<br>
<select id="textColorPicker" onchange="changeTextColor()">
<option value="transparent">--Select--</option>
<option value="#DAA520">GoldenRod</option>
<option value="#6B8E23">OliveDrab</option>
<option value="#DC143C">Crimson</option>
</select>
<select id="fontSizePicker" onchange="changeFontSize()">
<option value="transparent">--Select--</option>
<option value="100px">Large</option>
<option value="50px">Medium</option>
<option value="20px">Small</option>
</select> TextArea:
<textarea name='textarea' id="textarea" rows='15' cols='50'></textarea>

Make image change with selecting different option in dropdown - Javascript / Html

I have a system where you are able to choose a car. You can then choose the transmission and color. Different cars and transmissions bring up different colors. Not sure how to make an image appear of a car when a color is chosen. So for example I choose the rs6 and automatic and then the black color. I would then want an image to appear depending on the color chosen. How would I program it so different cars and colors bring up different images. Im relatively new to coding. Any help would be aprreciated.
HTML
<!DOCTYPE html>
<html><head>
<title></title>
</head>
<body>
<form name="CarConfigurator">
<select id="car" name="Car_make">
<option value="" selected="selected">Which car?</option>
<option value="car1">Audi RS6</option>
<option value="car2">BMW M4</option>
<option value="car3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select id="trans" name="A_M">
<option value="" selected="selected">What trans?</option>
<option value="auto">Automatic</option>
<option value="man">Manual</option>
</select>
<br>
<br>
<select id="color" name="Color">
<option value="" selected="selected">What Color?</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="green">Green</option>
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1 /jquery.min.js"/
</script>
<script src="configurator.js"></script>
</body>
</html>
Javascript
$("#car").change(function () {
transmission();
});
$("#trans").change(function () {
transmission();
});
function transmission() {
if ($("#car").val() == "car1" && $("#trans").val() == "auto") {
$("option[value$='red']").hide();
$("option[value$='white']").hide();
$("option[value$='green']").hide();
} else {
$("option[value$='red']").show();
$("option[value$='white']").show();
$("option[value$='green']").show();
}
}

For now it is only working for Audi - Automatic - black and blue to show you the basic idea but it is repeating code and you can do the same for the rest of the cars too.
In this example I am setting the src of the image as the car selected. For example if you select car1 and man and red then src of the image as car1manred.jpg, also I'm changing the alt attribute as well so that you can see the change.
you have to do a lot of manual work. I have created an object for the data that will determine how many cars you have in each category. It would be better if you use JSON for that.
Also I have made car1autoblack (which gets the src of the images) as an array but you can make it as an object and include other things about the cars in this category. for example name, price, availability and much more
$("#car").change(function () {
transmission();
selection();
});
$("#trans").change(function () {
transmission();
selection();
});
$("#color").change(function () {
selection();
});
var cars = {
car1autoblack:["car1auto1black1.png","car1auto1black2.jpg"],
car1autoblue:["car1auto1blue1.png","car1auto1blue2.jpg","car1auto1blue3.jpeg"]
}
function transmission() {
if ($("#car").val() == "car1" && $("#trans").val() == "auto") {
$("option[value$='red']").hide();
$("option[value$='white']").hide();
$("option[value$='green']").hide();
} else {
$("option[value$='red']").show();
$("option[value$='white']").show();
$("option[value$='green']").show();
}
}
function selection(){
if ($("#car").val() && $("#trans").val() && $("#color").val()) {
var carVal = $("#car").val();
var transVal = $("#trans").val();
var colorVal = $("#color").val();
var combineVal = carVal+transVal+colorVal;
//var imageLink = combineVal+".jpg";
//$("#showImg").attr("src", imageLink);
//$("#showImg").attr("alt", imageLink);
//console.log(cars[combineVal]);
var inputDivHTML = "";
var car = cars[combineVal];
for(i in car){
inputDivHTML += "<img class='showImg' src='"+car[i]+"' alt='"+car[i]+"'/>";
}
$(".imageHere").html(inputDivHTML);
}
}
img.showImg{
width:150px;
height:70px;
margin:10px 3px;
border:1px solid red;
float:left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="CarConfigurator">
<select id="car" name="Car_make">
<option value="" selected="selected">Which car?</option>
<option value="car1">Audi RS6</option>
<option value="car2">BMW M4</option>
<option value="car3">Mercedes C63 AMG</option>
</select>
<br>
<br>
<select id="trans" name="A_M">
<option value="" selected="selected">What trans?</option>
<option value="auto">Automatic</option>
<option value="man">Manual</option>
</select>
<br>
<br>
<select id="color" name="Color">
<option value="" selected="selected">What Color?</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="white">White</option>
<option value="green">Green</option>
</select>
</form>
<div class="imageHere">
<img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
<img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
<img class="showImg" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
</div>

How to Merge Java scripts to change font size and font color By getting User Input

I have written separate Javascript to change font color and font size. How to merge it to make the change of both simultaneously to the same font.
`enter code here`
<!DOCTYPE html>
<html>
<body>
<form>
<select onchange="ChangeFont (this);" size="1">
<option value="0.1">0.1</option>
<option value="0.25">0.25</option>
<option value="0.5">0.5</option>
<option value="0.75">0.75</option>
<option selected="1.0">1.0</option>
<option value="1.25">1.25</option>
<option value="1.5">1.5</option>
<option value="1.75">1.75</option>
<option value="2">2</option>
</select>
<span id="fontTest" style="font-size-adjust: 0.6">Change font-size-adjust</span>
</form>
<script type="text/javascript">
function ChangeFont (selectTag) {
// Returns the index of the selected option
var whichSelected = selectTag.selectedIndex;
// Returns the selected options values
var selectState = selectTag.options[whichSelected].text;
var fontTest = document.getElementById ("fontTest");
if ('fontSizeAdjust' in fontTest.style) {
fontTest.style.fontSizeAdjust = selectState;
} else {
alert ("Your browser doesn't support this example!");
}
}
</script>
</body>
</html>
Another one is font color change:
<!DOCTYPE html>
<html>
<body>
</form>
<select name="color" type="text" onchange="changeBackground(this);" >
<option value="select">Select</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="white">White</option>
<option value="black">Black</option>
</select>
<span id="coltext">This text should have the same color as you put in the text box</span>
</form>
<script>
function changeBackground(obj) {
document.getElementById("coltext").style.color = obj.value;
}
</script>
</body>
</html>
How to merge these two Java scripts? Please help me.

Try this
<!DOCTYPE html>
<html>
<body>
<form>
<select onchange="ChangeBackgroundFont(this,'font');" size="1">
<option value="0.1">0.1</option>
<option value="0.25">0.25</option>
<option value="0.5">0.5</option>
<option value="0.75">0.75</option>
<option selected="1.0">1.0</option>
<option value="1.25">1.25</option>
<option value="1.5">1.5</option>
<option value="1.75">1.75</option>
<option value="2">2</option>
</select>
<select name="color" type="text" onchange="ChangeBackgroundFont(this,'background');" >
<option value="select">Select</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="white">White</option>
<option value="black">Black</option>
</select>
<span id="fontbackgroundTest" style="font-size-adjust: 0.6">Change font-size-adjust</span>
</form>
<script type="text/javascript">
function ChangeBackgroundFont (selectTag,type) {
if(type=="font") {
// Returns the index of the selected option
var whichSelected = selectTag.selectedIndex;
// Returns the selected options values
var selectState = selectTag.options[whichSelected].text;
var fontTest = document.getElementById ("fontbackgroundTest");
if ('fontSizeAdjust' in fontTest.style) {
fontTest.style.fontSizeAdjust = selectState;
} else {
alert ("Your browser doesn't support this example!");
}
}else{
document.getElementById("fontbackgroundTest").style.color = selectTag.value;
}
}
</script>
</body>
</html>
I did for you enjoy ):

Add data into a Select

I have this select; to select countries and add to a new select multiple with a limit of 5 countries, but I just want to add 1 country by select or more countries if i do a multiple select.
My mistake is in my function addC(), when I want to add more than 1 country in my select, it add the several countries in 1 option tag like this:
<option>South KoreaUSAJapan</option>
What I can modify to display the following way if i do a multiple select?:
<option>South Korea</option>
<option>USA</option>
<option>Japan</option>
My code:http://jsbin.com/osesem/4/edit
function addC() {
if ($("#agregarProvincia option").length < 5) {
var newC = ($("#countries option:selected").text());
$("#addCountry").append("<option>" + newC + "</option>");
}
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<label for="provincia2"><b>¿Country?</b></label><br>
<span>
<select multiple="multiple" size="5" id="countries">
<option value="1">South Korea</option>
<option value="2">USA</option>
<option value="2">Japan</option>
<option value="3">Italy</option>
<option value="4">Spain</option>
<option value="5">Mexico</option>
<option value="6">England</option>
<option value="7">Phillipins</option>
<option value="8">Portugal</option>
<option value="9">France</option>
<option value="10">Germany</option>
<option value="11">Hong Kong</option>
<option value="12">New Zeland</option>
<option value="13">Ireland</option>
<option value="14">Panama</option>
<option value="15">Norwey</option>
<option value="16">Sweeden</option>
<option value="17">India</option>
<option value="18">Morroco</option>
<option value="19">Russia</option>
<option value="20">China</option>
</select>
</span>
<div class="addremover">
<input class="add" type="button" onclick="addC()" value="Addd »" />
<br/>
</div>
<span>
<select id="addCountry" multiple="multiple" size="5">
</select>
</span>

use each function to loop through the text and append it..
try this
function addC() {
if ($("#agregarProvincia option").length < 5) {
var newC = ($("#countries option:selected"));
newC.each(function(){
$("#addCountry").append("<option>" + $(this).text() + "</option>");
})
}
}
JSbin here

Or just clone the selected <option>'s
function addC() {
if ($('#countries option:selected').size() < 5)
{
$('#addCountry').append($('#countries option:selected').clone());
}
else
{
alert('you can only select 5');
}
}

Categories