Question

我确信有一个非常简单的解决方案，我只是不知道......

我有一个文本框和一个选择器。选择中的第一个选项是自定义，可以使用文本框输入。如果他们选择了其他内容，则文本框将被禁用。

我猜测解决方案是使用onclick测试值，但还有其他方法吗？

Answer 1

使用change事件，而不是click事件。

var select = document.getElementById('mySelect'),
    textbox = document.getElementById('myTextbox');

function onSelectChanged()
{
    console.log(select.selectedIndex);
    textbox.disabled = select.selectedIndex !== 0;
}

if (select.addEventListener)
{
    select.addEventListener('change', onSelectChanged, false);
}
else
{
    // !@#$ing IE support, of course
    select.attachEvent('onchange', onSelectChanged, false);
}

演示：http://jsfiddle.net/mattball/pJMWN/

Answer 2

不要认为onclick将为您的目的更好地使用选择中的onchange事件，并检查所选值不等于自定义，然后启用/禁用您的文本框...

希望这可以帮助你,,,,

Answer 3

您可以在onchange元素上使用select侦听器。我还建议使用onkeyup侦听器，因为当用户使用键盘更改选择框值时，某些浏览器不会触发onchange个事件。以下是一些示例代码：

<select id="mySelect" name="name" onkeyup="this.onchange();" onchange="selectChanged(this);">
    <option value="-1">(custom value)</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<input type="text" id="customText" name="customOption" value="" />

<script>
    window.selectChanged = function(theSelect) {
        var textInput = document.getElementById("customText");
        if (theSelect.selectedIndex == 0) {
            textInput.disabled = undefined;
        }
        else {
            textInput.disabled = true;
            textInput.value = "";
        }
    };
</script>

示例：http://jsfiddle.net/tB2Am/2/

你如何监控选择标签？

3 个答案: