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

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

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”的select值，然后将其分配给变量“ x”并将其插入ID为“ colors”的输入值中来工作。无论如何，都可以根据您的问题实施

Answer 3

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

只有最后一个可以使用。

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

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

利用HTML5 data-*属性

＆＃13;

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

＆＃13;

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>

＆＃13;

Answer 4

你可以这样解决。

`名字：

<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 5

以下是实现这一目标的方法：

＆＃13;

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();

＆＃13;

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>

＆＃13;

Answer 6

您的代码应如下所示。

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

更正确的方法是将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。

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

7 个答案: