Drop down with multiple values - how to treat in Javascript?
Question
I created a couple inputs and one drop down that feed into a javascript command to create custom sentences. Whatever the user inputs or selects is added to a sentence framework. When the user selects submit, the sentence is created. It is quite simple. I am running into trouble adding multiple inputs from one drop down to the sentence.
If the user selects "navigation" in addition to "usb ports" within the drop down, only navigation is added to the sentence. How can I change my code so that all selections from the drop down are added to the sentence? For example if "navigation" and "usb ports" is selected, the sentence would read: "It has these options: navigation and usb ports."
Also, note that I am using the Chosen plugin.
Thanks so much for your help.
<!DOCTYPE html> <html> <head> <title>Hi</title> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css"> <style type="text/css"> table,td,th {margin-left: auto;margin-right: auto} .display {display: flex;align-items: center;justify-content: center;} p {text-align: center;} textarea {display: block;margin-left:auto;margin-right: auto;} </style> <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script> <script type="text/javascript"> $(function() { $(".chosen-select").chosen({ disable_search_threshold: 4 }); }) </script> <script type="text/javascript"> function sentence() { document.getElementById("s1").value = "";// reset document.getElementById("s1").style.display = "block"; document.getElementById("r1").style.display = "block"; if (document.getElementById("z1").value == "") { alert("Year, Make, and Model are needed"); document.getElementById("z1").focus(); } else if (document.getElementById("z2").value == "") { alert("Mileage is needed"); } else if (document.getElementById("z3").value == "") { alert("Exterior color is needed"); } else { const input1 = document.getElementById("z1").value; const input2 = document.getElementById("z2").value; const input3 = document.getElementById("z3").value; const input4 = document.getElementById("z4").value; document.getElementById("s1").value = "Up for sale is a " + input1 + " with " + input2 + " miles. It is finished in " + input3 + ". It has these options: " +input4+ "." } } function reset() { document.getElementById("s1").value = ""; } function hide() { document.getElementById("s1").style.display = "none"; document.getElementById("r1").style.display = "none"; } </script> </head> <body onload="hide()"> <table> <tr> <td> <input type="text" id="z1" placeholder="Year, Make, Model" name="name" maxlength="100"> </td> <td> <input type="text" id="z2" placeholder="Mileage" name="name" maxlength="100"> </td> <td> <input type="text" id="z3" placeholder="Exterior Color" name="name" maxlength="100"> </td> <td> <select data-placeholder="Options" name="options" id="z4" multiple class="chosen-select"> <option value=""></option> <option value="navigation">Navigation</option> <option value="aux">Aux</option> <option value="usb ports">USB Ports</option> <option value="heated seats">Heated Seats</option> </select> </td> </tr> <tr> </table> <br> <div class="display"> <button onclick="sentence()"> Submit </button> </div> <hr> <br> <textarea rows="10" cols="100" id="s1"></textarea> <br> <div class="display"> <button onclick="reset()" id="r1">Reset</button> </div> </body> </html>
1 answers
solution1
0 2018-07-15 22:17:20
You need to loop the selections to get all of them eg
const input1 = document.getElementById("z1").value;
const input2 = document.getElementById("z2").value;
const input3 = document.getElementById("z3").value;
var input4 = '';
for(var i=0; i< document.getElementById("z4").options.length; i++) {
if(document.getElementById("z4").options[i].selected) {
if(input4 === '') {
input4 = document.getElementById("z4").options[i].value;
} else {
input4 += ' and ' + document.getElementById("z4").options[i].value;
}
}
}
I've done an example here with a basic for loop using javascript. You could make this more efficient, but it demonstrates the idea...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.