Question

我在html中有这样的代码：

<div id="answerTypeSection" style="visibility: hidden">
  <div class="row">
      <div class="col-md-2">adfadfafasdfasdfas</div>
 </div>
 <label class="control-label">adfa</label>
  adfaf
</div>

<select id="answerType" class="form-control">
                            <option></option>
                            <option>Text</option>
                            <option>A or B (Boolean)</option>
                            <option>Numeric</option>
                            <option>Photo</option>
                            <option>Files</option>
                            <option>Multi (combo)</option>
                        </select>

然后在javascript中

$("#answerType").change(function () {
    var answerType = $('#answerType').val();
    console.log('in');
    var showType;

    switch(answerType) {
        case "Numeric":
            showType = "N";
            console.log('numeric');
            $("#answerTypeSection").show();
            break;
        default:
            showType = "what";
            // hide?
            console.log('hide');
            $("#answerTypeSection").hide();
            break;

    }
 // required 
});

console.log最终显示＆＃39; in＆＃39;和＆＃39;数字＆＃39;所以它一定是我做得不对的其他事情。 answerTypeSection应该显示不应该吗？

Answer 1

尝试获取所选option元素的文字

$("#answerType").change(function() {
  var answerType = $('#answerType option:selected').text(), showType;
  switch (answerType) {
    case "Numeric":
      showType = "N";
      $("#answerTypeSection").show();
      break;
    default:
      showType = "what";
      $("#answerTypeSection").hide();
      break;
  }
});

DEMO

此外，.show()和.hide()不适用于visible:hidden。您必须使用display:none来使用它。如果要确保使用可见属性，则必须使用.css()更改属性。

这种情况的最佳方法是为select元素的选项设置value属性，

<select id="answerType" class="form-control">
  <option value="">---</option>
  <option value="Text">Text</option>
  <option value="A or B (Boolean)">A or B (Boolean)</option>
  <option value="Numeric">Numeric</option>
  <option value="Photo">Photo</option>
  <option value="Files">Files</option>
  <option value="Multi (combo)">Multi (combo)</option>
</select>

为了处理上面的html，你必须重写你的Js，如下所示，

$("#answerType").change(function() {
  var answerType = $(this).val();
  var showType;
  switch (answerType) {
    case "Numeric":
      showType = "N";
      $("#answerTypeSection").show();
      break;
    default:
      showType = "what";
      $("#answerTypeSection").hide();
      break;
  }
});

DEMO

Answer 2

visibility CSS应该通过CSS操作，如下所示

$("#answerTypeSection").css("visibility","visible")

Answer 3

.show（）更改显示样式 - 您正在使用visibility：hidden来隐藏不同的

Answer 4

您正在使用.show()函数为元素提供显示属性，并且您在div中使用visibility:hidden，因此您的函数运行正常，但您使用了错误的函数。

使用.css('visibility', 'visible');或在div中使用style="display:none"。

<强> HTML

<div id="answerTypeSection" style="display: none">
  <div class="row">
    <div class="col-md-2">adfadfafasdfasdfas</div>
  </div>
  <label class="control-label">adfa</label>
  adfaf
</div>

<select id="answerType" class="form-control">
  <option></option>
  <option>Text</option>
  <option>A or B (Boolean)</option>
  <option>Numeric</option>
  <option>Photo</option>
  <option>Files</option>
  <option>Multi (combo)</option>
</select>

<强> JS

$("#answerType").change(function() {
  var answerType = $('#answerType').val();
  console.log('in');
  var showType;

  switch (answerType) {
    case "Numeric":
      showType = "N";
      console.log('numeric');
      $("#answerTypeSection").show();
      break;
    default:
      showType = "what";
      // hide?
      console.log('hide');
      $("#answerTypeSection").hide();
      break;

  }
  // required 
});

示例：http://moosh-online.com/commands/

Answer 5

由于以下代码中的visible属性，您的div不显示：

<div id="answerTypeSection" style="visibility: hidden">

解决此问题的最简单方法是将上述代码更改为：

<div id="answerTypeSection" style="display: none">

Here is the JSFiddle demo

您的代码无效的原因是因为JQuery show()仅更改display属性而不更改您使用的visible属性。

为什么我的div没有出现jquery show

5 个答案:

DEMO

DEMO