stackoom
  简体   繁体   中英

Populating a select box based off of previous selection

 原文  2015-05-20 16:49:30  1   1    javascript/ html/ html-datalist

Question

Basically this is what i want to happen.
1. Choose name from datalist
2. randomly populates "standard" or "Sensitive"
3. Based on whats populated in step 2 the "VIP" select box will display Yes or No (if step 2 = standard then VIP = No, if step 2 = Sensitive then VIP = Yes)

Here is my code right now: 

 <html> <head> <title>Countdown</title> <input name="customer" list = "customer" id="customerI" onchange="getNumber()"> <!--Datalist populated with the customer[Array] below--> </input> <datalist id = "customer"></datalist> <br> <br> <select id = "phone" name ="phone" type = "text" placeholder = "Phone Number" value = ""> <!--Drop Down menu that should autopopulate based on the value of the datalist--> </select> VIP <select id = "VIP" name = "VIP" type = "text" value = ""></select> <!--Populated with VIP array below--> <script type="text/javascript"> var customer = ['david.a.onezine', 'jimmy.a.jams', 'larry.a.beatrice', 'janet.a.jackson', 'biggie.j.smalls', 'bob.marley', 'james.a.tribeca', 'veronica.a.mars', 'kassy.b.jones', 'victoria.a.langley']; var phone = ['Standard', 'Sensitive']; var VIP = ['Yes', 'No']; var arraylength = customer.length; //Arrays for the two drop downs are above, customer.length = 10, phone length = 10 var arraylength2 = phone.length; var arraylength3 = VIP.length; var i; //i for loops var options = ''; //blank value so that it can fill the option value with the values from the respective array var options2 = ''; var options3 = ''; options += '<option value="defualt">Choose a Name</option>'; //Same as above only for the <datalist id = customer> for(i = 0; i < arraylength; i++) options += '<option value="'+customer[i]+'">'+customer[i]+'</option>'; options2 += '<option value="defualt"></option>'; //Populates the <select id = phone> by looping through the array and populating the drop down for(i = 0; i < arraylength2; i++) options2 += '<option value="'+phone[i]+'">'+phone[i]+'</option>'; options3 += '<option value = "default"></option>'; //populates <select id = VIP> for(i=0; i < arraylength3; i++) options3 += '<option value = "'+VIP[i]+'">'+VIP[i]+'</option>'; document.getElementById('customer').innerHTML = options.toString(); //converts array values to strings so that it will display the options in the drop down for <datalist id = customer> document.getElementById('phone').innerHTML = options2.toString(); //converts array values to strings so that it will display the options in the drop down for <select id = phone> document.getElementById('VIP').innerHTML = options3.toString(); //displays <options> in the <select id = VIP> drop down getNumber(); function getNumber(){ //This is the autopopulate function var customervalue = document.getElementById('customerI').value; //Identifies the input field that comes with a datalist. If input value is the same as datalist value then... var i; var match = false; getVIP(); for(i = 0; i < arraylength; i++){ if(customervalue == customer[i]){ //loops through customer array and checks if any array item is identical to what has been put in the input field match = true; //if the match is true the loop stops running break; } } if(match == true){ //If someone chooses datalist option then <select id = phone> will have either standard/sensitive populated (this is completely at random) document.getElementById('phone').value = phone[Math.floor(Math.random() * arraylength2)]; //Chooses randomly between standard and sensitive } else { document.getElementById('phone').value = ""; document.getElementById('VIP').value = ""; } } function getVIP(){ //trying to make it so whatever the random value is the VIP select box populates with specific value. So if phone = standard then VIP = no(if phone[0] then VIP[1] var phoneValue = document.getElementById('phone').value; if (phoneValue == 0){ document.getElementById('VIP').value = VIP[1]; } else if (phoneValue == 1){ document.getElementById('VIP').value = VIP[0]; } } </script> </body> </html>

When I run the code the following happens:
1. Name is chosen from
2. populates random value of (standard, sensitive)
3. VIP Displays "No" based off selection from step 2

The issue is that VIP is only displaying "No" I would like it to display the following.

If step 2(above) = Standard then VIP = No if step2(above) = Sensitive then VIP = Yes

Right now I am only getting the value of "No".

1 answers

solution1
 0 ACCPTED  2015-05-20 19:58:00

Figured out the answer to the question.

If you want the VIP select box to populate based off of the value found in the previous select box use this code.

The code does the following

  1. User chooses value from the datalist
  2. randomly assigns "sensitive" and "standard" value
  3. VIP select references step 2 and assigns value to the box based on step 2.
    (if step 2 = sensitive then VIP = YES, if step2 = standard then VIP = NO) 

 <html> <head> <title>Countdown</title> <input name="customer" list = "customer" id="customerI" onchange="getNumber()"> <!--Datalist populated with the customer[Array] below--> </input> <datalist id = "customer"></datalist> <br> <br> <select id = "phone" name ="phone" type = "text" placeholder = "Phone Number" onchange = "getVIP()" value = ""> <!--Drop Down menu that should autopopulate based on the value of the datalist--> </select> VIP <select id = "VIP" name = "VIP" type = "text" value = ""></select> <!--Populated with VIP array below--> <script type="text/javascript"> var customer = ['david.a.onezine', 'jimmy.a.jams', 'larry.a.beatrice', 'janet.a.jackson', 'biggie.j.smalls', 'bob.marley', 'james.a.tribeca', 'veronica.a.mars', 'kassy.b.jones', 'victoria.a.langley']; var phone = ['Standard', 'Sensitive']; var VIP = ['No', 'Yes']; var arraylength = customer.length; //Arrays for the two drop downs are above, customer.length = 10, phone length = 10 var arraylength2 = phone.length; var arraylength3 = VIP.length; var i; //i for loops var options = ''; //blank value so that it can fill the option value with the values from the respective array var options2 = ''; var options3 = ''; options += '<option value="defualt">Choose a Name</option>'; //Same as above only for the <datalist id = customer> for(i = 0; i < arraylength; i++) options += '<option value="'+customer[i]+'">'+customer[i]+'</option>'; options2 += '<option value="defualt"></option>'; //Populates the <select id = phone> by looping through the array and populating the drop down for(i = 0; i < arraylength2; i++) options2 += '<option value="'+phone[i]+'">'+phone[i]+'</option>'; options3 += '<option value = "default"></option>'; //populates <select id = VIP> for(i=0; i < arraylength3; i++) options3 += '<option value = "'+VIP[i]+'">'+VIP[i]+'</option>'; document.getElementById('customer').innerHTML = options.toString(); //converts array values to strings so that it will display the options in the drop down for <datalist id = customer> document.getElementById('phone').innerHTML = options2.toString(); //converts array values to strings so that it will display the options in the drop down for <select id = phone> document.getElementById('VIP').innerHTML = options3.toString(); //displays <options> in the <select id = VIP> drop down getNumber(); function getNumber(){ //This is the autopopulate function var customervalue = document.getElementById('customerI').value; //Identifies the input field that comes with a datalist. If input value is the same as datalist value then... var i; var match = false; for(i = 0; i < arraylength; i++){ if(customervalue == customer[i]){ //loops through customer array and checks if any array item is identical to what has been put in the input field match = true; //if the match is true the loop stops running break; } } if(match == true){ //If someone chooses datalist option then <select id = phone> will have either standard/sensitive populated (this is completely at random) document.getElementById('phone').value = phone[Math.floor(Math.random() * arraylength2)]; //Chooses randomly between standard and sensitive } else { document.getElementById('phone').value = ""; document.getElementById('VIP').value = ""; } getVIP(); } function getVIP(){ //trying to make it so whatever the random value is the VIP select box populates with specific value. So if phone = standard then VIP = no(if phone[0] then VIP[1] var phonevalue = document.getElementById('phone').value; if (phonevalue == phone[0]){ document.getElementById('VIP').value = VIP[0]; } else if (phonevalue == phone[1]){ document.getElementById('VIP').value = VIP[1]; } } </script> </body> </html>

Merry Christmas and a Happy new year.

暂无
暂无

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.

Related Question Populate multiple select box based on selection from a previous select list Dropdown based on previous selection is not populating at all Populating select, based on previous select on jsp populating a 2nd select box based off the 1st one using ajax and PHP Populating a select menu based off of previously chosen select menu in KnockoutJS Populating a text box based on a selection from a drop down Trying to populate select based on previous 2 selection Show hide select box and select box option based on selection Autopopulate select box based on previous checkbox selections Spring populating form fields based on value from select box
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM