基本上这就是我想要发生的事情
1.从datalist中选择名称
2.随机填写“标准”或“敏感”
3.根据步骤2中填写的内容,“VIP”选择框将显示“是”或“否”
(如果步骤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根据第2步的选择显示“否”
问题是VIP只显示“否”我希望它显示以下内容。
如果步骤2(上述)=标准,则VIP =否 如果step2(上面)=敏感,那么VIP =是
现在我只得到“不”的价值。
答案 0 :(得分:0)
找出问题的答案。
如果您希望根据上一个选择框中找到的值填充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>
圣诞快乐,新年快乐。