JavaScript：分割功能

Question

任何知道如何傳遞a/b/c的值的人。如果選擇是國王，則在不同的文本框中傳遞值b和c。如果皇后將值d，e和f傳遞給同一個文本框。任何人都可以幫助我完成我所需要的功能。

 <select id="select" name="select" > 
      <option value="">---Please select---</option> 
      <option value="a/b/c">king</option> 
      <option value="d/e/f">queen</option> 
     </select> 

     <input type="text" class="form-control" id="a" name="a" value=a required> 

     <input type="text" class="form-control" id="b" name="b" value=b required> 


     <input type="text" class="form-control" id="c" name="c" value=c required> 

Answer 1

將onchange事件添加到您選擇的元素;

<select id="select" name="select" onchange="fn()"> 
     <option value="">---Please select---</option> 
     <option value="a/b/c">king</option> 
     <option value="d/e/f">queen</option> 
    </select> 

然後寫下面的JavaScript來實現這一目標：

function fn() { 
    var x = document.getElementById("select").value; 
    var arr_x = x.split('/'); 
    document.getElementById("a").value = arr_x[0]; 
    document.getElementById("b").value = arr_x[1]; 
    document.getElementById("c").value = arr_x[2]; 
} 

Answer 2

您可以通過添加一個監聽器，你select組件然後把它的值（在這個例子中「A/B /做到這一點c「或」d/e/f「）。爲了獲得每個單獨的字母，我們在/定界符上使用split()，並用每個字母回退一個數組。

然後我們獲取所有具有form-control類getElementsByClassName()併爲每個我們通過一個循環，其改變的每個輸入字段與前陣信迭代元素的元素。

document.getElementById('select').onchange = function() { 
 
    var values = this.value.split("/"); 
 
    var elements = document.getElementsByClassName("form-control"); 
 
    for (var i = 0; i < elements.length; i++) { 
 
    elements[i].value = values[i] || ""; 
 
    } 
 
};

<select id="select" name="select"> 
 
    <option value="">---Please select---</option> 
 
    <option value="a/b/c">king</option> 
 
    <option value="d/e/f">queen</option> 
 
</select> 
 

 
<input type="text" class="form-control" id="a" name="a" value=a required> 
 
<input type="text" class="form-control" id="b" name="b" value=b required> 
 
<input type="text" class="form-control" id="c" name="c" value=c required>

Answer 3

$('#select').change(function(){ 
 
var ySelectedValue = $(this).val(); 
 
var ySelectedValueSplit = ySelectedValue.split("/"); 
 

 
$('#a').val(ySelectedValueSplit[0]); 
 
$('#b').val(ySelectedValueSplit[1]); 
 
$('#c').val(ySelectedValueSplit[2]); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select" name="select" > 
 
      <option value="">---Please select---</option> 
 
      <option value="a/b/c">king</option> 
 
      <option value="d/e/f">queen</option> 
 
     </select> 
 

 
     <input type="text" class="form-control" id="a" name="a" value= required> 
 

 
     <input type="text" class="form-control" id="b" name="b" value= required> 
 

 

 
     <input type="text" class="form-control" id="c" name="c" value= required>