JavaScript隐藏/显示不适用于onchange事件

当在下拉框中选择某个值时，我试图隐藏某些内容

函数顺序（）
{
var x=$（“#ddlViewBy”）.val（）；
如果（x=“高”）
{
$（“#man_cont”）.hide（）；
$（“man#u cont1”）.show（）；
}
否则，如果（x==“低”）
{
$（“#man_cont”）.show（）；
$（“#man_cont1”）.hide（）；
}
其他的
{
$（“#man_cont”）.hide（）；
$（“#man_cont1”）.hide（）；
}
}

高的
低的
//一些内容
//一些满足感

jQuery UI自动完成-默认功能
顺序=功能
{
var x=document.getElementById（“ddlViewBy”）.value；
如果（x=“高”）
{
$（“#man_cont”）.hide（）；
$（“man#u cont1”）.show（）；
}
其他的
{
$（“#man_cont”）.show（）；
$（“#man_cont1”）.hide（）；
}
}
高的
低的
//一些内容
//一些内容1

这个代码对我很有效

<select name="arnge" class="selectmenu" id="ddlViewBy" onchange="order(this)">
  <option value="man_cont"></option>
  <option value="high">high</option>
  <option value="low">low</option>
</select>

<div id="man_cont" class="foo man_cont">
 //some content
    low
</div>
<div id="man_cont1" class="foo man_cont1" style="display:none;">
 //some content
    high
</div>

<script>
function order(el) {
  var x = el.value;

  if (x == "high") {
    document.getElementById('man_cont').style.display = 'none';
    document.getElementById('man_cont1').style.display = 'block';
  } else if (x == 'low') {
    document.getElementById('man_cont1').style.display = 'none';
    document.getElementById('man_cont').style.display = 'block';
  } else {
    document.getElementById('man_cont1').style.display = 'none';
    document.getElementById('man_cont').style.display = 'none';  
  }
}
</script>

高的
低的
//一些内容
低的
//一些内容
高的
功能顺序（el）{
var x=el.值；
如果（x=“高”）{
document.getElementById（'man_cont'）.style.display='none'；
document.getElementById（'man_cont1'）。style.display='block'；
}如果（x==‘低’），则为else{
document.getElementById（'man_cont1'）。style.display='none'；
document.getElementById（'man_cont'）.style.display='block'；
}否则{
document.getElementById（'man_cont1'）。style.display='none'；
document.getElementById（'man_cont'）.style.display='none'；
}
}

我只做了三个更改：
1.将param添加到

order

函数中，避免在第一个

order

函数行中指定元素ID（只会使代码更好，您可以更改为元素ID而不会丢失功能）
2.在

if-else

part中切换纯JS的jQuery选择器。我想您可能忘了链接jQuery关于

x

定义的链接。

---

3.当从下拉列表中选择非选项时隐藏两个div（

）

代码工作正常。但如果您想在下拉列表中未选择任何选项时隐藏两个div，则必须为两个div都提供display:none css默认值。

我只是简单地回答了这个问题。
正如Op所说，他包含了jQuery，他几乎不能像这样修改他的代码

        function order()
        {
            var x = document.getElementById("ddlViewBy").value;
            //var x = $("#ddlViewBy").val();//You can replace previous line with this as you included jQuyer
            if(x=="high")
            {
                $("#man_cont").hide();
                $("#man_cont1").show();
            }
            else if(x=="low")//You just missed this Option that's why it was not working as you want
            {
                $("#man_cont").show();
                $("#man_cont1").hide();
            }
            else
            {
                $("#man_cont").hide();
                $("#man_cont1").hide();
            }

        }

---

试试这个：

document.getElementById('man_cont').style.display = 'none';
document.getElementById('man_cont1').style.display = 'block';

$("#man_cont").hide();
$("#man_cont1").show();

而不是：

document.getElementById('man_cont').style.display = 'none';
document.getElementById('man_cont1').style.display = 'block';

$("#man_cont").hide();
$("#man_cont1").show();

---

也许这对你有帮助

<select name="arnge" class="selectmenu" id="ddlViewBy" onchange="order(this)">
  <option value="man_cont"></option>
  <option value="high">high</option>
  <option value="low">low</option>
</select>

<div id="man_cont" class="foo man_cont">
 //some content
    low
</div>
<div id="man_cont1" class="foo man_cont1" style="display:none;">
 //some content
    high
</div>

<script>
function order(data) {
  var d = data.value;

  if (d == "high") {
    document.getElementById('man_cont').style.display = 'none';
    document.getElementById('man_cont1').style.display = 'block';
  } else if (d == 'low') {
    document.getElementById('man_cont1').style.display = 'none';
    document.getElementById('man_cont').style.display = 'block';
  } else {
    document.getElementById('man_cont1').style.display = 'none';
    document.getElementById('man_cont').style.display = 'none';  
  }
}
</script>

高的
低的
//一些内容
低的
//一些内容
高的
功能顺序（数据）{
var d=数据值；
如果（d=“高”）{
document.getElementById（'man_cont'）.style.display='none'；
document.getElementById（'man_cont1'）。style.display='block'；
}否则，如果（d==‘低’）{
document.getElementById（'man_cont1'）。style.display='none'；
document.getElementById（'man_cont'）.style.display='block'；
}否则{
document.getElementById（'man_cont1'）。style.display='none'；
document.getElementById（'man_cont'）.style.display='none'；
}
}

您正在混合使用jquery和javascript。如果您使用的是

$

请确保您已加载jquery。是的，我已添加jquery库。@fortune:您为什么推荐如此旧版本的jquery？@panther我删除了我的评论。OP评论说他已经添加了jquery库。谢谢你指出你的代码。请包括您所犯的错误。我不认为这个答案会被否决。我确信OP没有包括jQuery，他也包括了它。旁注：这是有效的，只是为了让您知道，当在选择了之后选择了在下拉列表中没有显示任何内容的选项时，在选择之后，将显示为“//某些内容较低”，不管这是否是OP想要的。将由OP决定；）@Fred ii-：我更新了我的答案，在那里添加了

else

，它隐藏了两个div。啊，太好了。有某种形式的默认值总是好的；-）很好的演示如果OP包含了JQuery为什么他需要将代码更改为基本javascript样式？@ShaifulIslam：因为他在我的回答后10分钟添加了此信息：-）而且，他使用pureJS设置了

var x

，这不是JQuery的任务，所以我只继续使用pureJS解决方案。没什么不好的。我在我的代码下的

2

点中写到，他可能忘了链接jQuery。在这段代码中，jQuery不是必需的，而纯解决方案是最快的（谁知道呢，当他知道这个任务不需要jQuery时，可能是OP unlink jQuery:-）。