JavaScript hide/show 不适用于 onchange 事件 - JavaScript hide/show is not working with onchange event

在下拉框中选择值时，我试图隐藏一些内容。

function order()
{
  var x = $("#ddlViewBy").val();
  if(x=="high")
  {
    $("#man_cont").hide();
    $("#man_cont1").show();
  }
  else if(x=="low")
  {
    $("#man_cont").show();
    $("#man_cont1").hide();
  }
  else
  {
    $("#man_cont").hide();
    $("#man_cont1").hide();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="arnge" class="selectmenu" id="ddlViewBy" onchange="order()">
  <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 contents
</div>
<div id="man_cont1" class="foo man_cont1" style="display:none;">
  //some contentss
</div>

你能帮我完成这个吗？

这段代码对我很好用。

<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>

http://jsfiddle.net/oejdz7fk/1/

我只做了三个更改：
1.在函数中添加参数order避免在order函数的第一行中指定元素ID（只是使代码更好，您可以更改为elem ID而不会丢失功能）
2. 在if-else部分切换了纯 JS 的 jQuery 选择器。我希望你忘了链接jQuery关于x定义。
3. 从下拉列表中选择非选项时隐藏两个div （ <option value="man_cont"> ）

好吧，

我只是让这个答案变得简单。
正如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();
            }
        }

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

查看演示

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
order = function
{
var x = document.getElementById("ddlViewBy").value;
if(x=="high")
{
$("#man_cont").hide();
$("#man_cont1").show();
}
else
{
$("#man_cont").show();
$("#man_cont1").hide();
}
}
</script>
</head>
<body>
<select name="arnge" class="selectmenu" id="ddlViewBy" onchange="order()">
<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
 </div>
 <div id="man_cont1" class="foo man_cont1" style="display:none;">
 // some content1
 </div>
</body>
</html>

试试这个：

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>