如何在html select的onChange上传递参数

Question

我是JavaScript和jQuery的新手.我想展示一个组合框-A,它是一个<select>带有选定id内容的HTML ,另一个位于onChange()上.

如何通过选择传递完整的组合框id,以及如何在onChange事件触发时传递其他参数？

Answer 1

function getComboA(selectObject) {
    var value = selectObject.value;  
}

<select id="comboA" onchange="getComboA(this)">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>

上面的示例为您提供OnChange事件上组合框的选定值.

Answer 2

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

<select onChange="myFunction(this.options[this.selectedIndex].value)">
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
</select>

Answer 3

有关如何在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.您应该查看差异并确保使用适当的差异.

Answer 4

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>

或者

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

或者

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

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

Answer 5

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

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函数将取决于浏览器.第二种方式似乎跨浏览器工作就好了.

Answer 6

jQuery解决方案

如何获取所选选项的文本值

选择元素通常具有两个您要访问的值.
首先是要发送到服务器的值,这很容易:

$( "#myselect" ).val();
// => 1

第二个是select 的文本值.
例如,使用以下选择框:

<select id="myselect">
  <option value="1">Mr</option>
  <option value="2">Mrs</option>
  <option value="3">Ms</option>
  <option value="4">Dr</option>
  <option value="5">Prof</option>
</select>

如果你想获得字符串"Mr",如果选择了第一个选项(而不仅仅是"1"),你可以通过以下方式实现:

$( "#myselect option:selected" ).text();
// => "Mr"  

也可以看看

• .val()jQuery API文档

Answer 7

这对我有帮助。

对于选择：

$('select_tags').on('change', function() {
    alert( $(this).find(":selected").val() );
});

对于收音机/复选框：

$('radio_tags').on('change', function() {
    alert( $(this).find(":checked").val() );
});