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

这段代码很适合我。

<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选择器。我希望您忘记链接有关x定义的jQuery 3.从下拉列表（<option value="man_cont">）

中选择非选项时，隐藏两个div

Answer 2

我只是简单地回答这个问题正如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 3

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 4

代码工作正常。但是如果你想在下拉列表中没有选择任何内容时隐藏这两个div，那么你必须将display：none css赋予div默认值。

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事件一起使用

6 个答案: