Question

我有2个表格

<select>
  <option>Rose</option>
  <option>Violet</option>
</select>

和

<input type="text" value="Autofill here" />

如果用户选择Rose，文本表单值将自动为“红色”。

如果用户选择Violet，文本表单值将自动为“蓝色”。

你有一个简单的样本吗？

Answer 1

使用jQuery，添加更改事件以进行选择，将所选值设置为文本输入。注意：您需要先添加Blue Red以选择HTML中的选项：

$('#myselect').on('change', function(){
  $('#myinput').val($(this).val());
})

// init
$('#myselect').change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="myselect">
  <option value="Red">Rose</option>
  <option value="Blue">Violet</option>
</select>

<input id="myinput" type="text" value="Autofill here" />

Answer 2

使用JQuery的基本思想：

HTML：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="colorPicker">
  <option value="Red">Rose</option>
  <option value="Blue">Violet</option>
</select>

使用Javascript：

$(document).ready(function(){
        //when the select changes:
    $('.colorPicker').on("change", function(){
        //set the value of the input to the value of the select.
            $('.colorDisplay').val($(this).val());
    });
});

原则上，我们绑定一个函数来改变select的事件。使用类来标识输入字段和选择。当用户选择一个选项时，输入会自动更新为所选选项的值。

小提琴here

Answer 3

你可以尝试

var e = document.getElementById("selectFlower");
e.addEventListener("change", function(){
    $('#inp').css('color', $('#selectFlower').val());
});

<select id="selectFlower">
      <option value="red">Rose</option>
      <option value="blue">Violet</option>
</select>

<input type="text" id="inp" value="Autofill here" />

Answer 4

使用 Vanilla JavaScript

var e = document.getElementById("selectFlower");
e.addEventListener("change", function() {

  var val = e.options[e.selectedIndex].text;
  document.getElementById("inp").value = val;

});

// To show preselected value

var val = e.options[e.selectedIndex].text;
document.getElementById("inp").value = val;

<select id="selectFlower">
  <option>Rose</option>
  <option>Violet</option>
</select>

<input type="text" id="inp" value="Autofill here" />

Answer 5

<select id="sel">
  <option value="Rose">Rose</option>
  <option value="Violet">Violet</option>
</select>

<input id="test" type="text" value="Autofill here" />

JS代码是

var selection = document.getElementById("sel");
document.getElementById("test").value(selection.options[ selection.selectedIndex ].value)

从这个JS代码中创建一个函数，并使用onChange属性将其添加到input

选择选项表单后自动填充文本表单值

5 个答案: