如何在下拉菜单的变化上显示隐藏的div答案

【问题标题】：How to show hidden div onchange of dropdown如何在下拉菜单的变化上显示隐藏的div
【发布时间】：2016-02-15 06:14:57
【问题描述】：

我有一个下拉列表，其中有一些非活动值。当我更改下拉列表中的值时，我需要在 divInactive 类中找到 id 并显示特定的非活动项。用户应该给出消息（存在于 @987654324 @) 如果他选择了非活动的。

divInactive 中的跨度值是使用模型中的 foreach 循环生成的。

仅为非活动项目生成跨度。我无法显示非活动消息。

HTML

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
  <option value="honda">Honda</option>
  <option value="ferrari">Ferrari</option>
  <option value="BMW">BMW</option>
  <option value="jaguar">Jaguar</option>
</select>

<div class="divInactive">  
  <span id="spninactive_Saab" style="display:none;">Saab is inactive</span>
  <span id="spninactive_Ferrari" style="display:none;">Ferrari is inactive</span>
  <span id="spninactive_Jaguar" style="display:none;">Jaguar is inactive</span>  
</div>

JS

$(document).ready(function() {
  $("#drp").onchange {
    var ddlTxt = $("#drp").text();
    $(".divInactive").each(function() {

      cmpValue = $(this).find('#spninactive_' + ddlTxt).text();

      if (ddlTxt == cmpValue) {
        $(".divInactive #spninactive_" + ddlTxt).show();
      }
    });
  }

});

Fiddle Demo

【问题讨论】：

检查这个..是你想要的...jsfiddle.net/mogn9acz

标签： javascript jquery html drop-down-menu onchange

【解决方案1】：

试试这个：

$("#drp").on("change", function() {
    var ddlTxt = $("#drp option:selected").text();
    $(".divInactive span").hide();
    $("#spninactive_" + ddlTxt).show();
});

演示：https://jsfiddle.net/r71nsk2t/3/

【讨论】：

【解决方案2】：

主要问题出在你的小提琴上，我没有包含 jquery。

我已经包含了 jquery 并编辑了代码：请检查，

$(document).ready(function(){
        $("#drp").on('change', function(e) {
        var car = $(this).val();
        var selector = ".divInactive #spninactive_"
                     + (car.substr(0, 1).toUpperCase() 
                     + car.substr(1));

        // If there is no selector found then hide all the
        // sections.
        if (!$(selector).length) {
            $(".divInactive span").css({"display":"none"});
            return; 
        }
        $(selector).css({"display": "block"});
    });
});

小提琴：https://jsfiddle.net/dineshpatra28/r71nsk2t/4/

【讨论】：

【解决方案3】：

这样使用。

$(document).ready(function() {


  $("#select").on('change', function() {
    $(".divInactive span").hide()
    var str = $(this).find('option:selected').html()
    console.log(str);

    var ele = $("#spninactive_" + str)
    if (ele) {

      ele.show();

      console.log("(present in divInactive")
    }

  })
});

Plunker

【讨论】：

【解决方案4】：

使用:contains，它将返回包含上述文本的元素。

试试这个：

  $("#drp").on('change', function() {
    var ddlTxt = $("#drp option:selected").text();
    $(".divInactive span").hide();
    $(".divInactive span:contains(" + ddlTxt + ")").show();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="drp">
  <option value="0">--SELECT--</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
  <option value="honda">Honda</option>
  <option value="ferrari">Ferrari</option>
  <option value="BMW">BMW</option>
  <option value="jaguar">Jaguar</option>
</select>

<div class="divInactive">
  <span id="spninactive_Saab" style="display:none;">Saab is inactive</span>
  <span id="spninactive_Ferrari" style="display:none;">Ferrari is inactive</span>
  <span id="spninactive_Jaguar" style="display:none;">Jaguar is inactive</span>
</div>

Fiddle here

【讨论】：

【解决方案5】：

试试这样：

<select id="drp">
<option value="0">--SELECT--</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="honda">Honda</option>
<option value="ferrari">Ferrari</option>
<option value="BMW">BMW</option>
<option value="jaguar">Jaguar</option>
</select>

<div class="divInactive">  
<span id="spninactive_Saab" style="display:none;">Saab is inactive</span>
<span id="spninactive_Ferrari" style="display:none;">Ferrari is  inactive</span>
<span id="spninactive_Jaguar" style="display:none;">Jaguar is  inactive</span>  
</div>

JQuery:

$(document).ready(function() {
$("#drp").on("change", function() {
    var ddlTxt = $("#drp option:selected").text();
    $(".divInactive span").hide();
    $("#spninactive_" + ddlTxt).show();
})
});

查笔链接：http://codepen.io/anon/pen/gPEPeM

【讨论】：

【解决方案6】：

首先将 jquery 库添加到您的 Fiddle。

您不必循环选择选项，jquery 提供了解决此问题的方法。

    $(document).ready(function(){
      $("#drp").on('change', function() {
         var selectValue = $("#drp option:selected").text();
         $(".divInactive span").hide();
         $('#spninactive_'+selectValue).show(); 
      }); 
   });

Fiddle

【讨论】：