Question

我希望有人可以提供帮助。我之前已成功使用onClick命令执行此操作，但它在Chrome中无效。我相信它可以在Chrome中使用我需要使用'onChange'事件。

基本上我有一个名为Subject的文本字段。然后我有一个列出主题的下拉列表。选择主题时，我希望它将选定的主题放入名为“主题”的单独文本字段中。这是我到目前为止所拥有的。我会很高兴 - 任何帮助或指导。

<select name="ChooseSubject" id="history" onchange="SubjectChanged(Subject);">
<option value="Maths">Maths</option>
<option value="English">English</option>
<option value="French">French</option>
</select>

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"> 

</script>
<script type="text/javascript">

</script>

Answer 1

使用Subject.value获取所选值。

function SubjectChanged(Subject){
      console.log(Subject.value);
      $('#inputBox').val(Subject.value);
}

替代方法，使用.change()事件。

$('#history').change(function(){
  console.log($(this).val());
}

function SubjectChanged(Subject){
  console.log(Subject.value);
   $('#inputBox').val(Subject.value);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select name="ChooseSubject" id="history" onchange="SubjectChanged(this);">
    <option value="Maths">Maths</option>
    <option value="English">English</option>
    <option value="French">French</option>
    </select>

<input type="text" id="inputBox" />

Answer 2

删除内联函数，以后会导致很多PITA。试试这个。

Vanilla JS

document.getElementById('history').onchange = function() {
     document.getElementById('selectedSubject').value = this.value;
};

的jQuery

$('#history').change(function() {
    $('#selectedSubject').val($('#history :selected').val());
}

<强> Fiddle Here

使用下拉Onchange事件更新文本字段

2 个答案: