根据先前的选择填充选择框

时间:2015-05-20 16:49:30

标签: javascript html html-datalist

基本上这就是我想要发生的事情 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 =是

现在我只得到“不”的价值。

1 个答案:

答案 0 :(得分:0)

找出问题的答案。

如果您希望根据上一个选择框中找到的值填充VIP选择框,请使用此代码。

代码执行以下操作

  1. 用户从数据列表中选择值
  2. 随机分配“敏感”和“标准”值
  3. VIP选择参考步骤2并根据步骤2将值分配给该框 (如果步骤2 =敏感,则VIP = YES,如果step2 =标准,则VIP = NO)
  4. <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>

    圣诞快乐,新年快乐。