我是JavaScript和jQuery的新手。我想显示一个combobox-A,这是一个HTML <选择>与其选择的id和内容在onChange()的其他地方。

如何通过其选择id完整的组合框,以及如何通过onChange事件的其他参数?


当前回答

JavaScript解决方案

<select id="comboA">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
<script>
 document.getElementById("comboA").onchange = function(){
    var value = document.getElementById("comboA").value;
 };
</script>

or

<script>
 document.getElementById("comboA").onchange = function(evt){
    var value = evt.target.value;
 };
</script>

or

<script>
 document.getElementById("comboA").onchange = handleChange;

 function handleChange(evt){
    var value = evt.target.value;
 };
</script>

其他回答

我发现@Piyush的回答很有帮助,只是补充一下,如果您以编程方式创建一个选择,那么有一个重要的方法来获得这种行为,可能不明显。假设你有一个函数,你创建了一个新的select:

var changeitem = function (sel) {
  console.log(sel.selectedIndex);
}
var newSelect = document.createElement('select');
newSelect.id = 'newselect';

正常的行为可能是说

newSelect.onchange = changeitem;

但是这并不允许你指定传入的参数,所以你可以这样做:

newSelect.setAttribute('onchange', 'changeitem(this)');

你可以设置参数。如果采用第一种方法,那么onchange函数的参数将依赖于浏览器。第二种方法似乎在跨浏览器中工作得很好。

如何在jQuery中做到这一点:

<select id="yourid">
<option value="Value 1">Text 1</option>
<option value="Value 2">Text 2</option>
</select>

<script src="jquery.js"></script>
<script>
$('#yourid').change(function() {
  alert('The option with value ' + $(this).val() + ' and text ' + $(this).text() + ' was selected.');
});
</script>

你还应该知道Javascript和jQuery是不一样的。jQuery是有效的JavaScript代码,但并不是所有的JavaScript都是jQuery。你应该查找不同之处,并确保你使用的是合适的。

如果有人正在寻找一个React解决方案,而不需要下载附加依赖项,你可以这样写:

<select onChange={this.changed(this)}>
   <option value="Apple">Apple</option>
   <option value="Android">Android</option>                
</select>

changed(){
  return e => {
    console.log(e.target.value)
  }
}

确保在构造函数中绑定changed()函数,如下:

this.changed = this.changed.bind(this);

在某些情况下,另一种方便的方法是将所选<option />的值直接传递给函数,如下所示:

myFunction(selected) { console.log(选择); } <选择onChange = " myFunction (this.options [this.selectedIndex] value)" > <option value="1">Text 1</option> . <option value="2">Text 2</option> . < /选择>

JavaScript解决方案

<select id="comboA">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
<script>
 document.getElementById("comboA").onchange = function(){
    var value = document.getElementById("comboA").value;
 };
</script>

or

<script>
 document.getElementById("comboA").onchange = function(evt){
    var value = evt.target.value;
 };
</script>

or

<script>
 document.getElementById("comboA").onchange = handleChange;

 function handleChange(evt){
    var value = evt.target.value;
 };
</script>