Question

我有一个简单的是/否的下拉列表。

当用户选择＆＃34;是＆＃34;当用户选择＆＃34;否＆＃34;时，页面会为他们选择新的下拉菜单（新产品）。它应该显示不同的下拉（非销售原因）

在我的网页上，当用户选择＆＃34;是＆＃34;它有效，但当他们选择＆＃34; No＆＃34;

时没有任何反应

更改后的脚本是：

<td colspan="2" style="text-align: left;"><select name="Retained" id="Retained" onchange="display(this,'Yes','No');" >

我已将代码添加到jsfiddle

http://jsfiddle.net/s0s7dry7/7/

由于某种原因，它在这里显示不正确（没有隐藏但是我的页面上隐藏了下拉菜单）

有人可以帮我吗？

由于

Answer 1

var el = document.getElementById("Retained");
el.onchange = function(evt){
    var no = document.getElementById("No");
    var yes = document.getElementById("Yes");
    if(evt.target.options[evt.target.selectedIndex].value === 'No'){console.log("NO")}
    if(evt.target.options[evt.target.selectedIndex].value === 'Yes'){console.log("YES")}
}

你可以将console.log（＆＃34; No＆＃34;）修改为no.style.display =＆＃39; block＆＃39; 你可以将console.log（＆＃34;是＆＃34;）修改为yes.style.display =＆＃39; block＆＃39;

  if(evt.target.options[evt.target.selectedIndex].value === 'No'){no.style.display='block'}
  if(evt.target.options[evt.target.selectedIndex].value === 'Yes'){yes.style.display='block'}

Answer 2

您目前向display函数传递了三个参数：this，'Yes'和“No”。第三个在函数定义中没有给出名称，实际上被忽略了;基本上，每次调用此函数时，id1参数都会以'Yes'的形式传入。

我不确定你想要实现的目标，但这可能不是你想做的。函数中的txt变量将始终设置为当前（即新的）值，但它将始终与id1进行比较;同样，您只会修改ID为'Yes'的文档元素。

要解决此问题，您可以将onchange调用中的第二个参数更改为新选择的值。但即使这是多余的，因为如上所述，您可以从元素参考中确定这一点。相反，我会删除'Yes'和'No'参数，并将display()函数简化为只计算txt的内容。现在您知道那是什么，您可以判断用户是选择是或否，并使用简单的if - 否则您可以在这些单独的情况下执行您需要做的任何事情。

Answer 3

这是您需要的简化版本：

function display(val) {
var elems = document.getElementsByClassName('options');
for(var i = 0; i < elems.length; i++) {
    elems[i].style.display = "none";
}
document.getElementById(val).style.display = "block";
    

}

<table>
    <tr>
        <td style="text-align: left;">Sale:</td>
        <td style="text-align: left;">
            <select name="Retained" id="Retained" onchange="display(document.getElementById('Retained').value);">
                <option value=""></option>
                <option value="No">No</option>
                <option value="Yes">Yes</option>
            </select>
        </td>
    </tr>
    <tr id="Yes" style="display: none" class="options">
        <td class="title">New Product:</td>
        <td class="field">
            <select name="RetainedProduct" id="RetainedProduct">
                <option value=""></option>
                <option value="£10">£10</option>
                <option value="£6.50">£6.50</option>
            </select>
        </td>
    </tr>
    <tr id="No" style="display: none" class="options">
        <td class="title">Non Sale Reason:</td>
        <td colspan="2" class="field">
            <select name="RetainedProduct" id="RetainedProduct">
                <option value=""></option>
                <option value="Not interested">Not interested</option>
                <option value="Too expensive">Too expensive</option>
            </select>
        </td>
    </tr>
</table>

onchange上有两个选项

3 个答案: