根据之前的 selection 填充一个 select 框
Populating a select box based off of previous selection
基本上这就是我想要发生的事情。
1. 从数据列表中选择名称
2.随机填充"standard"或"Sensitive"
3. 根据步骤 2 中填充的内容，"VIP" select 框将显示是或否
（如果第 2 步 = 标准，则 VIP = 否，如果第 2 步 = 敏感，则 VIP = 是）
这是我现在的代码：
<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>
当我 运行 代码时，会发生以下情况：
1. 名称选自
2.填充随机值（标准，敏感）
3. VIP 显示 "No" 基于第 2 步 selection
问题是 VIP 只显示 "No" 我希望它显示以下内容。
如果第 2 步（以上）= 标准，则 VIP = 否
if step2(above) = Sensitive then VIP = Yes
现在我只得到 "No" 的值。
想出了问题的答案。
如果您希望 VIP select 框根据在前一个 select 框中找到的值填充，请使用此代码。
代码执行以下操作
- 用户从数据列表中选择值
- 随机分配"sensitive"和"standard"值
- VIPselect参考步骤2，根据步骤2给盒子赋值
（如果步骤 2 = 敏感，则 VIP = 是，如果步骤 2 = 标准，则 VIP = 否）
<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>
圣诞快乐，新年快乐。
基本上这就是我想要发生的事情。
1. 从数据列表中选择名称
2.随机填充"standard"或"Sensitive"
3. 根据步骤 2 中填充的内容，"VIP" select 框将显示是或否
（如果第 2 步 = 标准，则 VIP = 否，如果第 2 步 = 敏感，则 VIP = 是）
这是我现在的代码：
<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>
当我 运行 代码时，会发生以下情况：
1. 名称选自
2.填充随机值（标准，敏感）
3. VIP 显示 "No" 基于第 2 步 selection
问题是 VIP 只显示 "No" 我希望它显示以下内容。
如果第 2 步（以上）= 标准，则 VIP = 否 if step2(above) = Sensitive then VIP = Yes
现在我只得到 "No" 的值。
想出了问题的答案。
如果您希望 VIP select 框根据在前一个 select 框中找到的值填充，请使用此代码。
代码执行以下操作
- 用户从数据列表中选择值
- 随机分配"sensitive"和"standard"值
- VIPselect参考步骤2，根据步骤2给盒子赋值
（如果步骤 2 = 敏感，则 VIP = 是，如果步骤 2 = 标准，则 VIP = 否）
<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>
圣诞快乐，新年快乐。