如果下拉框中只有一个值，HTML下拉框无法捕捉到onChange()事件。

Question

我正在使用Jquery来选择下拉菜单的值。

我需要在OnChange事件（jQuery中的.change）上执行一些操作，但是如果下拉菜单中只有一个选项，我就无法在OnChange事件中捕获它。

我的下拉菜单是动态生成的，所以我不知道会有多少个选项，但如果只有一个选项，我就会遇到问题。
有没有办法在只有一个<option>的<select>上捕获OnChange事件？

- Debugger

---

你的接口设计存在缺陷。如果下拉菜单只能选择一个选项，那么下拉菜单就不是正确的控件。 - Joel Etherton

@Joel - 其实不是这样的，有些情况下这种方法是正确的。例如：选择星球 然后 选择月球。这将会使第二个下拉菜单在0-63之间变化，而地球只有一个选项（除非你计算Cruithne，但你不应该这么做）。 - Niklas

@JoelEtherton，下拉菜单是动态生成的。 - Debugger

@调试器：如果它是动态生成的，那么添加一个“填充”选择项应该很简单，比如“选择一个”，或者其他需要实际更改的内容。 - Joel Etherton

你解决了这个问题或者取得了进展吗？ - Niklas

Answer 1

你不需要一个onchange事件。只需拥有一个从onchange调用的函数，如果只有一个项目，就直接调用该函数。

function populate() {
    //do work to populate #selector

    if($("#selector option").length == 1) {
        $("#selector").hide();
        workerFunction();
    } else {
        $("#selector").show();
    }

    $("#selector").change(workerFunction);

    //the following line of code will work like a default:
    workerFunction();
}

function workerFunction() {
    //put whatever used to be in your onChange function here
}

- Jordan

---

我喜欢这个答案，但你也可以把它缩短一点 - $("#selector").change(workerFunction); - shanabus

是的，我喜欢这个答案。但是当选择框中有10个选项时，第一个是默认选项，并且您需要对第一个选项的操作进行处理时，这也会带来问题。这就是为什么我在考虑自动建议或其他解决方案。 - Debugger

@Debugger 只需将其自动默认为第一个。我输入了一行代码，可以为您完成这项任务。 - Jordan

Answer 2

<label for="checkboxThatUsedToBeASelect">
    <input type="checkbox" id="checkboxThatUsedToBeASelect" name="checkboxThatUsedToBeASelect"  value="something" />
</label>

$('#checkboxThatUsedToBeASelect').change( function(){

});

现在您拥有了更加用户友好的输入方式，当它被选中或取消选中时，它将触发更改。 :D

- MetalFrog

---

下拉菜单是动态生成的，但我仍需遵循已为包含元素的选择器完成的功能。 - Debugger

我非常支持在选择十个或更少的项目时使用单选按钮/复选框。这样使用起来更加容易。 - MetalFrog

Answer 3

怎么样，加一个条件事件绑定器？就像这样：

var changeHandler = function (method) {
    alert(method);
};
if ($('select option').length > 1) {
    $('select').change(function() {
        changeHandler('change');
    });
} else {
    $('select').click(function() {
        changeHandler('click');
    });
}

- pete

---

可以获取值，但我需要在其onChange上进行操作。 - Debugger

在 onchange 事件中，你需要做什么？ - pete

Answer 4

当元素的内部状态发生改变时，将触发 onchange 事件。由于您有一个具有唯一值的下拉菜单，其状态永远不会改变，因此该事件不会被触发。

- elmasse

---

下拉菜单是动态生成的，但我仍然需要遵循我为包含元素的选择器完成的功能。 - Debugger

你可以尝试为那些只有一个元素的下拉菜单添加模糊事件处理程序，或者添加一个空值“选择元素”，这样用户就可以真正更改下拉菜单的值。 - elmasse

Answer 5

看起来你的选项标签中有HTML错误。

除此之外，为了针对使用jQuery动态创建的元素进行操作，你需要使用委托。

$('selector').change( function(e){...}); // without delegator
$('body').on('change','selector', function(e){...}); // with delegator, it detects even an element added dinamically

话虽如此，您应该能够检测到新旧元素的更改

- Murelh

Answer 6

.change正在寻找另一个囚犯来交换位置。不幸的是，在你的情况下，存在一个孤独无依的案例，因此该事件未被触发。

- Premanshu

---

我喜欢这个评论，看来我现在需要做宝宝的一天了...;-) - Debugger