JavaScript：分割の機能

Question

a/b/cの値を渡す方法を知っている人。選択が王の場合は、値aとbを別のテキストボックスに渡します。女王の場合、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

select要素に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コンポーネント（「/ B​​ /にリスナーを追加することによって、これを達成することができますc "または" d/e/f "）。ここで個々の文字を取得するには、デリミタでsplit()を使用し、各文字で配列を返します。

クラスを持つすべての要素を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>