Question

想要磨练我的javascript。我希望将select-option下拉列表中的文本发送到输入。香港专业教育学院找到了一种方法...但我的问题是 - 有一个更短的方式（在香草javascript）？

<select id="gren" onChange="return func1(this)"><option>1</option><option>2</option>
<option>3</option><option>4</option></select>
<input style="text" id="testing">

与

<script>
function func1(select){
var rr = document.getElementById("gren");
var jest = rr.options[rr.selectedIndex].text;
document.getElementById("testing").value = jest; }
</script>

我正在思考以下几点：

function func1(select){document.getElementById("testing").value = 
this.options[select.selectedIndex].innerHTML;}

但它不起作用..为什么？

Answer 1

<select id="gren" onChange="return func1(this)"><option>1</option><option>2</option>
<option>3</option><option>4</option></select>
<input style="text" id="testing">
<script>
function func1(select){document.getElementById("testing").value = 
select.value;}
</script>

或

<select id="gren" onChange="return func1(this)"><option>1</option><option>2</option> <option>3</option><option>4</option></select> <input style="text" id="testing"> <script> function func1(select){document.getElementById("testing").value = select.innerHTML;} </script>

Answer 2

更短并不总是更好，代码清晰度和可读性是您想要的 - 以及良好的结构。如果您想改进JavaScript，请从不使用内联属性进行事件处理，例如onchange。

以下是我的jsFiddle和以下代码：

HTML：

<select class="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>
<input type="text" class="myInput">

JavaScript的：

var select = document.querySelector('.mySelect');
var input = document.querySelector('.myInput');
var updateInput = function () {
    input.value = this.options[select.selectedIndex].innerHTML;
};
select.onchange = updateInput;

Answer 3

尝试select变量而不是this关键字

function func1(select) {
    document.getElementById("testing").value = select.options[select.selectedIndex].innherHTML;
    //OR
    document.getElementById("testing").value = select.options[select.selectedIndex].text;
}

Answer 4

您使用错误this并出现语法错误：

function func1(select){document.getElementById("testing").value = 
**this**.options[select.selectedIndex].inn**h**erHTML;}

this是您代码中的窗口。

试试这个：

 function func1(select){document.getElementById("testing").value = 
**select**.options[select.selectedIndex].innerHTML;}

Answer 5

试试这个，

 function func1(select){
      document.getElementById("testing").value = select.text;
  }

从选择选项中获取文本并将其发送到输入

5 个答案: