从下拉列表 javascript 事件中选择

Posted 2023-05-09

【中文标题】从下拉列表 javascript 事件中选择

【英文标题】：Selection from dropdownlist javascript event

【发布时间】：2015-11-23 15:19:45

【问题描述】：

我有这个 html 部分代码：

 <p><label>Taxe </label>
    <select id="id_taxe" name="id_taxe" style="width: 100px;" onchange="taxselection(this);"></select>
    <input id="taxe" name="taxe" class="fiche"  readonly="readonly" />%
</p>

Javascript 方法：

function taxselection(cat)

    var tax = cat.value;
    alert(tax);
    $("#taxe").val(tax);

我想将taxe 输入的值设置为从下拉列表中选择的值。只有在下拉列表包含多个元素时才能正常工作。

我尝试使用onselect 而不是onchange，但我遇到了同样的问题。

那么当列表只包含一个元素时，我该如何解决这个问题呢？

【问题讨论】：

尝试使用 innerhtml 也在这里看看这个也可能会给你一些想法***.com/questions/5069294/…

对我来说很好用：jsfiddle.net/z2uao1un -edit- 我现在明白你的问题是什么了。是的 onchange 意味着它必须触发 change 事件，没有选项就永远不会发生变化。

@Mikey 我的问题是当我只有一个元素而不是两个元素时

@LamloumiAfif 是的，我明白了，我已经发布了一个解决方法作为答案。

【参考方案1】：

这行得通：

$('#id_taxe').change(function()
  var thisVal = $(this).val();
  var curVal = $('#taxe').val();

  if(thisVal != curVal)
    $('#taxe').val(thisVal);
  $('#select option:selected').removeAttr('selected');
  $(this).attr('selected','selected');
);

使用对选择框非常有效的更改方法。只需检查所选项目当前未选中，如果未选中，请将输入值设置为所选值。最后，您要删除任何“selected=selected”选项的属性并将当前选项设置为选中。

只需将其包含在 HTML 末尾的 $(document).ready() 包装器中，更改事件将锚定到选择字段。

希望这会有所帮助。

http://jsbin.com/populo

【讨论】：

我的代码运行良好。只有当我有一个元素时我才有问题

然后你需要插入一个空白的“请选择一个选项”选项。 jsbin.com/populo - 见修改后的方法。向用户展示一个已经选择了选项的表单是不礼貌的，最好有一个预选选项，它使更改和表单验证更容易处理。好像您的用户“忘记”更改值一样，如果没有默认的“请选择一个选项”，您在验证期间不一定会意识到

【参考方案2】：

要么总是给出一个空选项，要么在输出选择的代码中检查选项的数量，如果只有 1 个选项，则立即设置输入值。

只有 1 个选项的选择没有事件，因为默认情况下会选择该选项，因此没有更改，也没有事件。

【参考方案3】：

正如 DrunkWolf 提到的，始终添加一个空选项，或者您可以尝试 onblur 或 onclick 事件，具体取决于您实际尝试执行的操作。

【参考方案4】：

好的，只是为了贴近你的代码，这样做：http://jsfiddle.net/z2uao1un/1/

function taxselection(cat) 
    var tax = cat.value;
    alert(tax);
    $("#taxe").val(tax);


taxselection(document.getElementById('id_taxe'));

这将调用函数 onload 并获取元素的值。您还可以向元素添加 onchange 事件处理程序。我强烈建议不要在 HTML 中这样做！祝你好运。