selectboxのテキストをテキストボックスに表示するにはどうすればよいですか？

Question

選択したイベントに基づいて各テキストボックスにselectboxのテキストを表示するにはどうすればよいですか？ 私のコードはselectboxの値をテキストボックスにのみ表示します。私はそれを各オプションのテキストに置き換えたいと思う。

var selectBox = document.getElementById('mySelect'); 
 
var selectBox2 = document.getElementById('mySelect2'); 
 

 
selectBox.addEventListener('change', handleChange); 
 
selectBox2.addEventListener('change', handleChange); 
 
          
 
function handleChange(event) 
 
{ 
 
    if (event.target.id == "mySelect") { 
 
     document.getElementById('myInput').value = selectBox.value; 
 
    } else { 
 
     document.getElementById('myInput2').value = selectBox2.value; 
 
    } 
 
}

<select id="mySelect"> 
 
    <option value="Option 1"> this Text</option> 
 
    <option value="Option 2">this Text 2</option> 
 
</select> 
 
<select id="mySelect2"> 
 
    <option value="Option 1">this Text</option> 
 
    <option value="Option 2">this Text 2 </option> 
 
</select> 
 

 

 
<input type="text" id="myInput" /> 
 
<input type="text" id="myInput2" />

Answer 1

select要素のselectedOptions[0].textを使用して、選択したオプションのラベルにアクセスできます。

var selectBox = document.getElementById('mySelect'); 
 
var selectBox2 = document.getElementById('mySelect2'); 
 

 
selectBox.addEventListener('change', handleChange); 
 
selectBox2.addEventListener('change', handleChange); 
 
          
 
function handleChange(event) 
 
{ 
 
    if (event.target.id == "mySelect") { 
 
     document.getElementById('myInput').value = selectBox.selectedOptions[0].text; 
 
    } else { 
 
     document.getElementById('myInput2').value = selectBox2.selectedOptions[0].text; 
 
    } 
 
} 
 

 
// Set initial values: 
 
document.getElementById('myInput').value = selectBox.selectedOptions[0].text; 
 
document.getElementById('myInput2').value = selectBox2.selectedOptions[0].text;

<select id="mySelect"> 
 
    <option value="Option 1"> this Text</option> 
 
    <option value="Option 2">this Text 2</option> 
 
</select> 
 
<select id="mySelect2"> 
 
    <option value="Option 1">this Text</option> 
 
    <option value="Option 2">this Text 2 </option> 
 
</select> 
 

 

 
<input type="text" id="myInput" /> 
 
<input type="text" id="myInput2" />

Answer 2

$('.mySelect').change(function(){ 
    var select_box_val = $(this).val(); 
    $('#myInput').val(select_box_val) 
}); 

は上記のコードを試してみてください。

は、ここに私のコードです。

Answer 3

あなたが代わりに値

var selectBox = document.getElementById('mySelect'); 
 
var selectBox2 = document.getElementById('mySelect2'); 
 

 
selectBox.addEventListener('change', handleChange); 
 
selectBox2.addEventListener('change', handleChange); 
 
          
 
function handleChange(event) { 
 
    if (event.target.id == "mySelect") { 
 
     var index = selectBox.selectedIndex; 
 
     var option = selectBox.options[index] 
 
     document.getElementById('myInput').value = option.textContent; 
 
    } else { 
 
     var index = selectBox2.selectedIndex; 
 
     var option = selectBox2.options[index]; 
 
     document.getElementById('myInput2').value = option.textContent; 
 
    } 
 
}

<select id="mySelect"> 
 
    <option value="Option 1"> this Text</option> 
 
    <option value="Option 2">this Text 2</option> 
 
</select> 
 
<select id="mySelect2"> 
 
    <option value="Option 1">this Text</option> 
 
    <option value="Option 2">this Text 2 </option> 
 
</select> 
 

 

 
<input type="text" id="myInput" /> 
 
<input type="text" id="myInput2" />

または使用のオプションのtextContentを使用したいjQueryの

$('#mySelect, #mySelect2').on('change', function() { 
 
    $('#'+this.id.replace('mySelect', 'myInput')).val($('option:selected', this).text()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="mySelect"> 
 
    <option value="Option 1"> this Text</option> 
 
    <option value="Option 2">this Text 2</option> 
 
</select> 
 
<select id="mySelect2"> 
 
    <option value="Option 1">this Text</option> 
 
    <option value="Option 2">this Text 2 </option> 
 
</select> 
 

 

 
<input type="text" id="myInput" /> 
 
<input type="text" id="myInput2" />

Answer 4

node.valueは常に入力のvalue属性を読み取ることが起こっています。 あなたは実際に渡そうとしている値で値を置き換えることができます。

例;

あなたが行くここ

<option value="this Text">this Text</option> 
     <option value="this Text 2">this Text 2 </option> 

Answer 5

、 場合には、あなたが選択したオプションだけでなく、同じよう.valueに

document.getElementById('myInput').value = selectBox.options[selectBox.selectedIndex].value; 

var selectBox = document.getElementById('mySelect'); 
 
var selectBox2 = document.getElementById('mySelect2'); 
 

 
selectBox.addEventListener('change', handleChange); 
 
selectBox2.addEventListener('change', handleChange); 
 
          
 
function handleChange(event) 
 
{ 
 
    if (event.target.id == "mySelect") { 
 
    
 
     document.getElementById('myInput').value = selectBox.options[selectBox.selectedIndex].text; 
 
    } else { 
 
     document.getElementById('myInput2').value = document.getElementById('myInput2').value = selectBox2.options[selectBox2.selectedIndex].text; 
 
    } 
 
}

<select id="mySelect"> 
 
    <option value="Option 1"> this Text</option> 
 
    <option value="Option 2">this Text 2</option> 
 
</select> 
 
<select id="mySelect2"> 
 
    <option value="Option 1">this Text</option> 
 
    <option value="Option 2">this Text 2 </option> 
 
</select> 
 

 

 
<input type="text" id="myInput" /> 
 
<input type="text" id="myInput2" />