选择选择选项时Javascript更改输入值

Question

我对javascript很陌生。 所以我有一个选择选项和一个输入字段。 我想要实现的是在我选择特定选项时改变输入字段的值。 这是我尝试过的：

First Name: <input type="text" value="colors">

<select name="">
   <option>Choose Database Type</option>
   <option onclick="myFunction(g)>green</option>
   <option onclick="myFunction(r)>red</option>
   <option onclick="myFunction(o)>orange</option>
   <option onclick="myFunction(b)>black</option>
</select>

<script>
function myFunction(g) {
    document.getElementById("myText").value = "green";
}
function myFunction(r) {
    document.getElementById("myText").value = "red";
}
function myFunction(o) {
    document.getElementById("myText").value = "orange";
}
function myFunction(b) {
    document.getElementById("myText").value = "black";
}
</script>

Answer 1

一些东西：

您应该使用onchange函数，而不是onclick每个单独的选项。

在每个选项上使用value属性来存储数据，并使用this的实例来分配更改（或event.target ）

您的文本字段中没有 ID

您缺少onclick函数的结束引号

<select name="" onchange="myFunction(event)">
    <option disabled selected>Choose Database Type</option>
    <option value="Green">green</option>
    <option value="Red">red</option>
    <option value="Orange">orange</option>
    <option value="Black">black</option>
</select>

和功能：

function myFunction(e) {
    document.getElementById("myText").value = e.target.value
}

并添加 ID

<input id="myText" type="text" value="colors">

小提琴： https ://jsfiddle.net/gasjv4hs/

Answer 2

更正确的方法是将您的 JS 代码放在不同的 .js 文件中并使用 Jquery，因为当您进一步编程时，这是正确的方法。

你的 HTML

<input type="text" id="color" name="color">
<select name="" id="changeData">
<option>Choose Database Type</option>
<option data-value="green">green</option>
<option data-value="red">red</option>
<option data-value="orange">orange</option>
<option data-value="black">black</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>

你的 JS

$(document).ready(function () {     
$('#changeData').change(function(){
var color = $(this).val();
$('#color').val(color);
})
});

还要确保您已将 Jquery 库添加到您的项目中。 您可以下载 Jquery 并添加到您的项目文件夹中，也可以使用 CDN。 在此示例中使用 CDN。

Answer 3

我想出了一个类似的问题。 在我的情况下，我试图根据选择列表中选项的值来更改输入的最小值。 我尝试应用上述解决方案，但没有任何效果。 所以我带来了这个，它可以应用于类似的问题

HTML

<input id="colors" type="text" value="">

<select id="select-colors" name="" onchange="myFunction()">
   <option disabled selected>Choose Colour</option>
   <option value="green">green</option>
   <option value="red">red</option>
   <option value="orange">orange</option>
   <option value="black">black</option>
</select>

JS

function myFunction() {
var x = document.getElementById("select-colors").value;
document.getElementById("colors").value = x;
  }

这通过在每次更改时获取 id 为“select-colors”的选择值，将其分配给变量“x”并将其插入到 id 为“colors”的输入值中。 这可以根据您的问题以任何方式实施

Answer 4

您多次创建具有相同名称的函数。

只有最后一个会起作用。

您传递的变量g,r,o,b未定义。

不要添加onclick到option添加onchange到select 。

利用HTML5 data-*属性

 function myFunction(element) { document.getElementById("myText").value = element; }

 First Name: <input type="text" id="myText" value="colors"> <select name="" onchange="myFunction(this.value);"> <option>Choose Database Type</option> <option data-value="green">green</option> <option data-value="red">red</option> <option data-value="orange">orange</option> <option data-value="black">black</option> </select>

Answer 5

你可以这样解决。

` 名字：

<select name="" onchange="myFunction()" id="selectID">
   <option>Choose Database Type</option>
   <option >green</option>
   <option >red</option>
   <option >orange</option>
  <option >black</option>
</select>

<script>
function myFunction() {
    var selectItem = document.getElementByID('selectID').value;
     document.getElementByID('yourId').value = sekectItem;

}
</script>

Answer 6

这是实现这一目标的一种方法：

 var select = document.getElementById('colorName'); function myFunction(event) { var color = 'No color selected'; if (select.selectedIndex > 0) { color = select.item(select.selectedIndex).textContent; } document.getElementById('myText').value = color; } select.addEventListener('click', myFunction); myFunction();

 First Name: <input type="text" id="myText"> <select id="colorName"> <option>Choose Database Type</option> <option>green</option> <option>red</option> <option>orange</option> <option>black</option> </select>

Answer 7

您的代码应如下所示。

<input type="text" name="color" id="color">
 <select name="" id="change_color">
    <option>Choose Database Type</option>
   <option >green</option>
     <option >red</option>
    <option >orange</option>
   <option >black</option>
</select>
<script type="text/javascript" src="jquery.js"></script>
<script>
    $(document).ready(function () {     
    $('#change_color').change(function(){
    var color = ($(this).val());
    $('#color').val(color);
    })
    });
</script>

Answer 8

这是对我有用的 JS 代码

var selectYear = document.getElementById('select-year');
selectYear.addEventListener('change', function() {
  var selectedYear = document.getElementById('selected-year');
  selectedYear.innerHTML = selectYear.value;
});

选择输入 ID：select-year 文本 ID：selected-year

从 Codex AI 生成的代码 :)