I have a script that uses a multidimensional array to give me convertions by reference :
var sizechanges = Array(
Array (6,8,10,12), //type A
Array(4,6,8,10)); //typeb
When a dropdown is changed in the html the value is obtained and a second dropdown is populated- code below (this works) and the log is as expected.
$(document).ready(function(){
$("#size0").on('change',function(){
var b0 = $('#size0').val();
var i = sizechanges[b0].length;
var blohtmml = ("<option>PLEASE SELECT</option>");
x = 0;
while ( x < i ) {
blohtmml += ("<option value='" + x + "'>" + sizechanges[b0][x] + "</option>") ;
console.log(sizechanges[b0][x]); works
x++;
}
$('#size1').html(blohtmml); //works
});
});
So the above works. Where I am having trouble is accessing the content added by html() method. My code is below:
$("#butt").on('click',function(){ //button id is #butt
var b1 = $('#size1').val();//size dropdown
var b2 = $('#size2').val();// country to dropdown
console.log(b1,b2); //nothing in log
var result = sizechanges[b2][b1];
console.log(result); //nothing in log
});
I can see that the source is not updated and was wondering how I can access the added content. I read many questions on append but can not find anything on html(). I guessing the solutions are similar but do not understand why the .on method is not finding the new HTML.
Lastly I am not getting any result for b2 which is a dropdown unaffected by the html insertion.
My HTML is added below for completeness.
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body style="background-color: lightblue;">
<form><label>I AM IN</LABEL><select id="size0" class="size0">
<option>PLEASE SELECT
</option>
<option value="1">
UK
</option>
<option value="0">
US
</option>
</select><br>
<label>size to convert </label>
<select id="size1" class="size1">
<option>PLEASE SELECT
</option>
</select><br>
<label>IS IN </label>
<select class="size2" id="size23">
<option>PLEASE SELECT</option>
<option value="1"> UK</option>
<option value="0"> US</option>
</select><br>
<button id="butt" type="button" >GET SIZE</button>
</form>
<div id="blobla"></div>
<div id="blobla2"></div>
</body>
</html>
Any help solving my problem will be greatly appreciated
Change:
<select class="size2" id="size23">`
to:
<select class="size2" id="size2">
And you might have better luck.
$(document).ready(function(){
var sizechanges = Array(
Array (6,8,10,12), //type A
Array(4,6,8,10)); //typeb
$("#size0").on('change',function(){
var b0 = $('#size0').val();
var i = sizechanges[b0].length;
var blohtmml = ("<option>PLEASE SELECT</option>");
x = 0;
while ( x < i ) {
blohtmml += ("<option value='" + x + "'>" + sizechanges[b0][x] + "</option>") ;
console.log(sizechanges[b0][x]); //works
x++;
}
$('#size1').html(blohtmml); //works
});
$("#butt").on('click',function(){ //button id is #butt
var b1 = $('#size1').val();//size dropdown
var b2 = $('#size2').val();// country to dropdown
console.log(b1,b2); //nothing in log
var result = sizechanges[b2][b1];
console.log(result); //nothing in log
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<form><label>I AM IN</LABEL><select id="size0" class="size0">
<option>PLEASE SELECT
</option>
<option value="1">
UK
</option>
<option value="0">
US
</option>
</select><br>
<label>size to convert </label>
<select id="size1" class="size1">
<option>PLEASE SELECT
</option>
</select><br>
<label>IS IN </label>
<select class="size2" id="size2">
<option>PLEASE SELECT</option>
<option value="1"> UK</option>
<option value="0"> US</option>
</select><br>
<button id="butt" type="button" >GET SIZE</button>
</form>
<div id="blobla"></div>
<div id="blobla2"></div>
Related
Trying to create a function using the dropdown values in html like so
<html>
<head>
<title>Taxi Fare</title>
<center><h1>Taxi Fare</h1>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
function myAddition(){
var NorthAvenue = 0;
var QuezonAvenue = 4;
var GMAKamuning = 5;
var $sum = (40) + (place2 - place1) * (14);
window.alert("The sum is: " + $sum);
}
</script>
</head>
<body class="bg-warning">
<center>
<form method="post">
<select id="place1" name="place1">
<option value="NorthAvenue">North Avenue</option>
<option value="QuezonAvenue">Quezon Ave</option>
<option value="GMAKamuning">GMA Kamuning</option>
</select>
</form>
<form method="post">
<select id="place2" name="place2">
<option value="NorthAvenue">North Avenue</option>
<option value="QuezonAvenue">Quezon Ave</option>
<option value="GMAKamuning">GMA Kamuning</option>
</select>
<button type="button" onclick="myAddition(place2,place1)">Compute Fare</button>
</body>
</html>
but it always returns "the sum is NaN" just confused as to what is wrong here
In your script function put two parameters like this function myAddition(place2,place1) and change value of select tags from text to number like this
<select id="place1" name="place1">
<option value="0">North Avenue</option>
<option value="4">Quezon Ave</option>
<option value="5">GMA Kamuning</option>
</select>
<select id="place2" name="place2">
<option value="0">North Avenue</option>
<option value="4">Quezon Ave</option>
<option value="5">GMA Kamuning</option>
</select>
<button type="button" onclick="myAddition(document.getElementById('place2').value,document.getElementById('place1').value)">Compute Fare</button>
Please try your code in this way
You were placing a html select object into a expression , what you have to do is to place the value of that html element that is select element using value property(place1.value and place2.value) and when it will be evaluated in a expression it will be acting as a string untill you evaluate it by using the eval function.Your code can be improved.Refer to other answers to improve the code , i have solved it in your way.
<html>
<head>
<title>Taxi Fare</title>
<center><h1>Taxi Fare</h1>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
function myAddition(){
var NorthAvenue = 0;
var QuezonAvenue = 4;
var GMAKamuning = 5;
var $sum = (40) + (eval(place2.value) - eval(place1.value)) * (14);
window.alert("The sum is: " + $sum);
}
</script>
</head>
<body class="bg-warning">
<center>
<form method="post">
<select id="place1" name="place1">
<option value="NorthAvenue">North Avenue</option>
<option value="QuezonAvenue">Quezon Ave</option>
<option value="GMAKamuning">GMA Kamuning</option>
</select>
</form>
<form method="post">
<select id="place2" name="place2">
<option value="NorthAvenue">North Avenue</option>
<option value="QuezonAvenue">Quezon Ave</option>
<option value="GMAKamuning">GMA Kamuning</option>
</select>
<button type="button" onclick="myAddition()">Compute Fare</button>
</body>
</html>
Hello i have a dropdown which is fetching data from a database. Forget about the database, i have a text box in front of the dropdown select. The logic is if i type in the text the value should be selected automatically from the dropdown if the value typed in the text not matched with the values in the dropdown, then the user can select the dropdown. Any help would be much appreciated.
Here is my html code!
<div class="form-group">
<label class="col-sm-4 control-label">Scheme**</label>
<div class="col-sm-4">
<select class="form-control" name="scheme" id="scheme">
<?php
for ($column = 'A'; $column <= $lastcol; $column++) {
echo '<option value="' . $column . '">' . $worksheet->getCell($column . '1')->getValue() . '</option>';
}
?>
</select>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="txt_scheme" name="txt_scheme" placeholder="Or Type here">
</div>
</div>
In dropdown i m getting these values
QC code
Analyte
Assay Value
Assigned Value
STANDARDDEVIATION
ACCEPTABLEMIN
ACCEPTABLEMAX
Sample ID
Date
Try this code, then you can modified with your need.
$("#product").on("change keyup paste", function(){
var valuefound ='';
$("#platformid option").each(function(i){
if($(this).text().substring(0, 2).toLowerCase()==$("#product").val().substring(0, 2).toLowerCase() ){ valuefound = $(this).val(); } });
$('option:selected', 'select[name="platformid"]').removeAttr('selected'); $('#platformid option[value="' + valuefound + '"]').prop('selected', true); })
Working fiddle here https://jsfiddle.net/8xfqeb9y/
<label for="">Enter Value</label>
<input type="text" class="textVal">
<select name="" id="listItems">
</select>
var listItems = ["One","Two","Three","Four","Five","Six"];
for (var i = 0; i < listItems.length; i++) {
console.log(listItems[i]);
$("#listItems").append("<option>" + listItems[i] + "</option>")
}
$(".textVal").on("focusout",function(){
for (var i = 0; i < listItems.length; i++) {
console.log(listItems[i]);
if(listItems[i] == $(this).val()) {
$("#listItems").val($(this).val());
}
}
})
check now that values and texts are different and you can even select now by typing one
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#txtselect").keyup(function(){
$("#selbox > option").each(function() {
if($(this).text()==$("#txtselect").val())
{
$(this).attr('selected', 'selected');
}
});
});
});
</script>
</head>
<body>
<select id="selbox">
<option val="select">select</option>
<option val="123">one</option>
<option val="abc">two</option>
<option val="23sfd">three</option>
<option val="27345">four</option>
</select>
<input type="text" id="txtselect"/>
</body>
</html>
check this you will get solution run snippet and type "one"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#txtselect").keyup(function(){
$("#selbox").val($("#txtselect").val());
});
});
</script>
</head>
<body>
<select id="selbox">
<option val="select">select</option>
<option val="one">one</option>
<option val="two">two</option>
<option val="three">three</option>
<option val="four">four</option>
</select>
<input type="text" id="txtselect"/>
</body>
</html>
Try this
<script type="text/javascript">
function getselected(elem)
{
var textvalue = $(elem).val();
if(textvalue != '')
{
$('select').removeAttr('disabled');
$('select option').removeAttr('selected');
$('select option').each(function(){
if ($(this).html().indexOf(textvalue) > -1)
{
$('select').val($(this).attr('value'));
}
});
}
else
{
$('select').val('');
$('select').attr('disabled','disabled');
}
}
</script>
<input type="text" name="name" value="" onkeydown="getselected(this)">
<select disabled="disabled">
<option value="">Select</option>
<option value="1">QC code</option>
<option value="2">Analyte</option>
<option value="3">Assay Value</option>
<option value="4">Assigned Value</option>
<option value="5">STANDARDDEVIATION</option>
<option value="6">ACCEPTABLEMIN</option>
<option value="7">ACCEPTABLEMAX</option>
<option value="8">Sample ID</option>
<option value="9">Date</option>
</select>
The above code is not working the way I want. The user should be able to select one option from each drop down menu & as soon as he selects a option price should be updated (at this point an alert box will do). User should be able to re-select any drop down menu if he/she wants and proper calculations needs to be done accordingly.
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="file.css">
<script type="text/javascript">
function dropdown() {
var drp = document.getElementById("numberlist");
var optn = document.createElement("OPTION");
optn.text="3";
optn.value="3";
drp.add(optn);
}
function Add() {
var e = document.getElementById('numberlist');
var txt = e.options[e.selectedIndex].text;
var txt_int = parseInt(txt);
var final_txt = show(txt_int);
//return final_txt;
//alert(txt_int);
}
function show(price) {
if(document.my_form.but1.checked == true) {
//alert("Box1 is checked");
price += 10;
}
else if(document.my_form.but2.checked == true) {
//alert("Box 2 is checked");
price += 15;
}
//return price;
alert(price);
}
</script>
</head>
<body onload="dropdown();">
<form name="my_form">
<select id="numberlist" onchange="Add()">
<option>Select</option>
<option>12</option>
<option>24</option>
<option>36</option>
</select>
<select id="numberlist" onchange="Add()">
<option>Select</option>
<option>12</option>
<option>24</option>
<option>36</option>
</select>
<select id="numberlist" onchange="Add()">
<option>Select</option>
<option>12</option>
<option>24</option>
<option>36</option>
</select>
<select id="numberlist" onchange="Add()">
<option>Select</option>
<option>12</option>
<option>24</option>
<option>36</option>
</select>
<br /> <p>
<input type="checkbox" name=but1 onchange="show()"> Gift Wrap $10 <br />
<input type="checkbox" name=but2 onchange="show()"> Express Shipping $15<br /> <p>
</form>
</body>
</html>
There are a couple of issues I see right of the bat.
Your select elements all have the same id attribute. This is a definite no-no. The use of document.getElementById() will only return one element.
If you want to get a handle on all of the select fields in your Add() and dropdown() functions, you should use the name attribute instead of the id attribute and query for these elements with document.getElementsByName(nameValue). This will return an array of all of your select elements which you would want to iterate over with a for loop.
The other issue is with your show() function. You have the parameter "price" defined in the function, buy you are not calling the function with a "price" argument. You can define a global price variable that will be accessible by all the functions with the window.
//Define a global price variable that will be visible to every function
var price;
//Add extra option to 'numberlist' select elements
function initDropdownOptions() {
//Grab all select elements by their name attribute
var selectElements = document.getElementsByName("numberlist");
//Initialize/Define for loop conditions variables
var numberOfDropdowns = selectElements.length;
var i;
//Define a reusable temp option variable to be reused
var optn;
//Iterate over select elements
for( i = 0; i < numberOfDropdowns; i++ ){
//Create a new option element and save it to the optn variable
optn = document.createElement("OPTION");
//Set the text of the option
optn.text="3";
//Set the value of the option
optn.value="3";
//Add the option to the ith select element
selectElements[i].add( optn );
}
}
function calculatePrice() {
//Grab all select elements by their name attribute
var selectElements = document.getElementsByName("numberlist");
//Initilize/Define for loop conditions variables
var i;
var numberOfDropdowns = selectElements.length;
//Define a temp holder for the select values
var tmpSelectValue;
//Initialize the global price variable to 0
price = 0;
for( i = 0; i < numberOfDropdowns; i++ ){
//Extract the value from the select element
tmpSelectValue = selectElements[i].options[ selectElements[i].selectedIndex ].value
//Parse the tmpSelectValue into a number and add it to the global price
price += parseFloat( tmpSelectValue );
}
//Add additional Charges if they are applicable
var giftWrapChecked = (document.my_form.but1.checked == true);
var expressShippingChecked = (document.my_form.but2.checked == true);
if( giftWrapChecked ) {
//Add aditional 10$
price += 10;
}
if( expressShippingChecked ) {
//Add additional 15$
price += 15;
}
//Output the price to the currentPrice div
document.getElementById("currentPrice").innerHTML = price;
}
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="file.css">
</head>
<body onload="initDropdownOptions();">
<form name="my_form">
<select name="numberlist" onchange="calculatePrice()">
<option value='0'>Select</option>
<option value='12'>12</option>
<option value='24'>24</option>
<option value='36'>36</option>
</select>
<select name="numberlist" onchange="calculatePrice()">
<option value='0'>Select</option>
<option value='12'>12</option>
<option value='24'>24</option>
<option value='36'>36</option>
</select>
<select name="numberlist" onchange="calculatePrice()">
<option value='0'>Select</option>
<option value='12'>12</option>
<option value='24'>24</option>
<option value='36'>36</option>
</select>
<select name="numberlist" onchange="calculatePrice()">
<option value='0'>Select</option>
<option value='12'>12</option>
<option value='24'>24</option>
<option value='36'>36</option>
</select>
<br />
<p>
<input type="checkbox" name=but1 onchange="calculatePrice()"> Gift Wrap $10 <br />
<input type="checkbox" name=but2 onchange="calculatePrice()"> Express Shipping $15<br />
<p>
<div id='currentPrice'></div>
</form>
</body>
</html>
This can be easily done using jQuery:
Try it:
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="file.css" />
</head>
<body>
<form name="my_form">
<select id="numberlist1" class="dropdown">
<option value="0">Select</option>
<option value="12">12</option>
<option value="24">24</option>
<option value="36">36</option>
</select>
<select id="numberlist2" class="dropdown">
<option value="0">Select</option>
<option value="12">12</option>
<option value="24">24</option>
<option value="36">36</option>
</select>
<select id="numberlist3" class="dropdown">
<option value="0">Select</option>
<option value="12">12</option>
<option value="24">24</option>
<option value="36">36</option>
</select>
<select id="numberlist4" class="dropdown">
<option value="0">Select</option>
<option value="12">12</option>
<option value="24">24</option>
<option value="36">36</option>
</select>
<br />
<p>
<input type="checkbox" name="but1" value="10" />
Gift Wrap $10 <br />
<input type="checkbox" name="but2" value="15" />
Express Shipping $15<br />
<p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$('input:checkbox, select.dropdown').change(function(){
var price = 0;
$('input:checkbox, select.dropdown').each(function(){
// Your Show function
if($(this).is('input:checkbox') )
{
if($(this).is(':checked'))
price += parseInt($(this).val());
}
else
price += parseInt($(this).val());
});
alert(price);
});
</script>
</body>
</html>
This one is driving me nuts. It’s got to be something simple and stupid that I am overlooking.
I have a multiple select box in a form. I am just trying to get the values that are selected. In my loop, if I use alert then I have no problem. As soon as try to concatenate the values I get the error ‘SelBranch[...].selected' is null or not an object
<form name="InventoryList" method="post" action="InventoryList.asp">
<select name="SelBranch" class="bnotes" size="5" multiple="multiple">
<option value="All">All</option>
<option value="001 Renton">001 Renton</option>
<option value="002 Spokane">002 Spokane</option>
<option value="003 Missoula">003 Missoula</option>
<option value="004 Chehalis">004 Chehalis</option>
<option value="005 Portland">005 Portland</option>
<option value="006 Anchorage">006 Anchorage</option>
<option value="018 PDC">018 PDC</option>
</select>
<input type="button" name="ViewReport" value="View" class="bnotes" onclick="GetInventory();">
</form>
<script language="JavaScript">
function GetInventory()
{
var InvForm = document.forms.InventoryList;
var SelBranchVal = "";
var x = 0;
for (x=0;x<=InvForm.SelBranch.length;x++)
{
if (InvForm.SelBranch[x].selected)
{
//alert(InvForm.SelBranch[x].value);
SelBranchVal = SelBranchVal + "," + InvForm.SelBranch[x].value;
}
}
alert(SelBranchVal);
}
</script>
The for loop is getting one extra run. Change
for (x=0;x<=InvForm.SelBranch.length;x++)
to
for (x=0; x < InvForm.SelBranch.length; x++)
Here i am posting the answer just for reference which may become useful.
<!DOCTYPE html>
<html>
<head>
<script>
function show()
{
var InvForm = document.forms.form;
var SelBranchVal = "";
var x = 0;
for (x=0;x<InvForm.kb.length;x++)
{
if(InvForm.kb[x].selected)
{
//alert(InvForm.kb[x].value);
SelBranchVal = InvForm.kb[x].value + "," + SelBranchVal ;
}
}
alert(SelBranchVal);
}
</script>
</head>
<body>
<form name="form">
<select name="kb" id="kb" onclick="show();" multiple>
<option value="India">India</option>
<option selected="selected" value="US">US</option>
<option value="UK">UK</option>
<option value="Japan">Japan</option>
</select>
<!--input type="submit" name="cmdShow" value="Customize Fields"
onclick="show();" id="cmdShow" /-->
</form>
</body>
</html>
Take a look at HTMLSelectElement.selectedOptions.
HTML
<select name="north-america" multiple>
<option valud="ca" selected>Canada</a>
<option value="mx" selected>Mexico</a>
<option value="us">USA</a>
</select>
JavaScript
var elem = document.querySelector("select");
console.log(elem.selectedOptions);
//=> HTMLCollection [<option value="ca">Canada</option>, <option value="mx">Mexico</option>]
This would also work on non-multiple <select> elements
Warning: Support for this selectedOptions seems pretty unknown at this point
Also, change this:
SelBranchVal = SelBranchVal + "," + InvForm.SelBranch[x].value;
to
SelBranchVal = SelBranchVal + InvForm.SelBranch[x].value+ "," ;
The reason is that for the first time the variable SelBranchVal will be empty
How can I change the values in the second select on change of the first one?
When I change to Cool drink then show Pepsi, Coac & Sprite only. When I change to Food then show Pizza, Chicken & Bar b Q
<select id="food">
<option>Cool Drink</option>
<option>Food</option>
</select>
<select id="Person">
<option>Pepsi</option>
<option>Coac</option>
<option>Sprite</option>
<option>Bar b Q</option>
<option>Chicken</option>
<option>Pizza</option>
</select>
This can be by using ajax.
<html>
<head>
<title>Food Order</title>
</head>
<body>
<select id="food" >
<option value="1">Cool Drink</option>
<option value="2">Food</option>
</select>
<select id="Person" >
<option>Select Option</option>
</select>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#food").change(function(){
var txt=$("#food").val();
$("#Person").empty();
$.ajax({
url : 'load.php',
method : 'POST',
data : {txt:txt},
success:function(data){
$("#Person").html(data);
}
});
});
});
</script>
</html>
Add another page with the name of (load.php) and add this code
<?php $data=$_POST['txt']; ?>
<?php if ($data == 1): ?>
<option>Pepsi</option>
<option>Coac</option>
<option>Sprite</option>
<?php else: ?>
<option>Bar b Q</option>
<option>Chicken</option>
<option>Pizza</option>
<?php endif ?>
As simple as I could make it. Very weird we cannot use :visible on the options
$('#food').on("change",() => {
const $opts = $('#Person option');
$opts.each((_,el) => $(el).toggleClass("hidden"));
$('#Person').val($opts.not('.hidden').eq(0).val());
})
.hidden {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="food">
<option>Cool Drink</option>
<option>Food</option>
</select>
<select id="Person">
<option value="1">Pepsi</option>
<option value="2">Coca Cola</option>
<option value="3">Sprite</option>
<option value="4" class="hidden">Bar b Q</option>
<option value="5" class="hidden">Chicken</option>
<option value="6" class="hidden">Pizza</option>
</select>
Crate list of drinks and food in JS.
const drinks = ["Pepsi", "Cola"];
const food = ["Pizza 1", "Pizza 2"]
and then create JS function, which will be fired by event onChange and update second dropdown list.
function changeList(name){
if (name === "Food") {
// fill list with foods
}
// fill list with drinks
}
Change the second dropdown contents depending on the data-type attribute of the first select on an onChange event. See below.
$('#food').on('change', function(){
const drink = ["Pepsi", "Coac", "Sprite"];
const food = ["Bar b Q", "Chicken", "Pizza"]
let type = $(this).children(":selected").data('type')
var $dropdown = $("#Person");
if (type=='food') {
arr = food
} else if (type=='drink') {
arr = drink
}
$dropdown.find('option').remove();
for (i = 0; i < arr.length; i++) {
$dropdown.append($("<option />").text(arr[i]));
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Food Order</title>
</head>
<body>
<select id="food" >
<option>Please Select</option>
<option data-type="drink">Cool Drink</option>
<option data-type="food">Food</option>
</select>
<select id="Person" >
<option>Please Select Type</option>
</select>
</body>
</html>