Question

我目前正在处理一个包含大量选项的表单。在一些问题上，有一个“其他”选项供用户输入他们选择的任何内容。我试图让它看起来只有“其他”被选中（我已经让这个工作在第一个问题而不是其他问题）。我也试图只在选择它时才需要输入，这样他们就无法提交选择“其他”的表格并将其留空。

这是我的HTML和用于在选择时显示其他文本输入的Javascript：

<label for="Accom">Question</label>
    <table>
        <tr>
            <td><select name="Accom">
                <option value="">Select...</option>
                <option value="Handicapped">Handicap Accessibility</option>
                <option value="Hearing Impaired">Hearing Impaired</option>
                <option value="Visually Impaired">Visually Impaired</option>
                <option value="OtherAccom">Other</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <label style="" id="other">If Other, Please Specify
                <input type="text" name="Other_Accom" size="20"></label></td><tr></table>

window.onload=function() {
var other = document.getElementById('other', 'otherAccom','otherDiet');;
other.style.display = 'none';
document.getElementsByName('Title', 'Diet', 'Accom')[0].onchange = function() {other.style.display =(this.value=='Other')? '' : 'none'};

我也试图让这个用于复选框表格。

<label for="Interests">Question</label><br>
            <input class="checkbox2" TYPE="checkbox" NAME="formInterests[]" required value="Use Cases ||" />Use Cases<br>
            <input class="checkbox2" TYPE="checkbox" NAME="formInterests[]" required value="Other" />Other<br>
            <label style="" id="other">If Other, Please Specify
                <input type="text" name="Other_Interests" size="20"></label>

非常感谢！

编辑1：当我尝试复制该功能时，它会停止工作。

window.onload=function() {
var other = document.getElementById('other', 'otherAccom', 'otherDiet');;
other.style.display = 'none';
document.getElementsByName('Title')[0].onchange = function() {other.style.display = (this.value=='Other')? '' : 'none'};
};

window.onload=function() {
var otherDiet = document.getElementById('other', 'otherAccom', 'otherDiet');;
otherDiet.style.display = 'none';
document.getElementsByName('Diet')[0].onchange = function() {otherDiet.style.display = (this.value=='OtherDiet')? '' : 'none'};
};

Answer 1

document.getElementsByName（＆＃39; Title＆＃39;，＆＃39; Diet＆＃39;，＆＃39; Accom＆＃39;）[0] .onchange = function（）{other.style.display = （THIS.VALUE ==＆＃39;其他＆＃39;）？＆＃39;＆＃39; ：＆＃39;没有＆＃39;};

这将选择一个元素数组，然后您可以通过[0]访问它们，这意味着您将第一个元素（将是DOM中出现的三个元素中的第一个元素）作为目标，并将onChange侦听器添加到它。结果如你自己所说：

（我已经让这个问题解决了第一个问题而不是其他问题）

因为你实际上只在三个元素之一上运行代码。

你应该使用类似的东西：

document.getElementsByName('Title', 'Diet', 'Accom').forEach(function(element) {
  element.onChange = function() {
    var target = document.getElementById('Other'+this.name);
    if(this.options[this.selectedIndex].value=='Other') {
      target.style.display = 'block';
    } else {
      target.style.display = 'none';
    }
  };
});

基本思想是使用forEach循环遍历所有您想要的元素，而不仅仅是其中一个元素。

请记住：

＆lt; option value =＆＃34; OtherAccom＆＃34;＆gt;其他＆lt; / option＆gt;

没有值=＆＃34;其他＆＃34;，但值=＆＃34; OtherAccom＆＃34;。确保你的javascript和html彼此一致。

Answer 2

您只能在页面上使用一次的ID（＆＃34;其他＆＃34;）

你需要重命名其他人＆＃34;其他人＆＃34;并为他们创建单独的功能

HTML表单：仅在选择其他时才需要其他输入

2 个答案: