如何将selectbox的文本显示到文本框？

Question

如何根据所选事件向每个文本框显示选择框的文本？ 我的代码只显示selectbox到textbox的值。我想用每个选项的文本替换它。

这是我的代码：

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访问所选选项的标签。

＆＃13;

＆＃13;

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;

＆＃13;

<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" />

＆＃13;

＆＃13;

＆＃13;

Answer 2

您使用textContent选项而不是值

＆＃13;

＆＃13;

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;
    }
}

＆＃13;

<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" />

＆＃13;

＆＃13;

＆＃13;

或使用jQuery

＆＃13;

＆＃13;

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

＆＃13;

<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" />

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

试试上面的代码。

Answer 4

node.value总是会读取输入的value属性。  您只需将值替换为您实际尝试传递的值即可。

实施例

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

Answer 5

你走了， 如果您想要所选的选项，只需将.text更改为.value，例如

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

＆＃13;

＆＃13;

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;
    }
}

＆＃13;

<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" />

＆＃13;

＆＃13;

＆＃13;