JavaScript hide/show 无法处理 onchange 事件

Question

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

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>

你能帮我完成这个吗？

Answer 1

CHECK DEMO

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

Answer 2

这段代码很适合我。

<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（只是使代码更好，您可以更改为元素 ID 而不会失去功能）
2. 在 if-else 部分为纯 JS 切换了 jQuery 选择器。我希望你忘记 link jQuery 关于 x 定义。
3. 当从下拉列表中选择非选项时隐藏两个 div (<option value="man_cont">)

Answer 3

代码有效 fine.but 如果你想在下拉列表中没有选择任何内容时隐藏两个 div 那么你必须给两个 display:none css div默认。

Answer 4

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

        }

Answer 5

试试这个：

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

而不是：

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

Answer 6

也许这会对你有所帮助。

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

JavaScript hide/show 无法处理 onchange 事件

JavaScript hide/show is not working with onchange event

html

javascript

php