javascript 根据以前的选择填充选择框

w6lpcovy  于 2023-01-01  发布在  Java
关注(0)|答案(1)|浏览(106)

基本上这就是我想要发生的。
1.从数据列表中选择名称
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 =否;如果步骤2(上文)=敏感,则VIP =是
现在我只得到了“不”的值。

xdnvmnnf

xdnvmnnf1#

找到了问题的答案。
如果您希望VIP选择框基于在上一个选择框中找到的值进行填充,请使用此代码。
该代码执行以下操作
1.用户从数据列表中选择值

  1. <select id = phone>随机分配“敏感”和“标准”值
    1.变坡点选择参照步骤2,并根据步骤2为长方体指定值。
    (If步骤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>

相关问题