如何显示隐藏的div onchange of dropdown

Question

我有一个下拉列表，其中有一些不活动的 values.When 我在下拉列表中更改一个值我需要在 divInactive class 中找到 id 并显示特定的不活动 item.User 如果他选择不活动的，应该给出消息（出现在 divInactive 中）。

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

仅为非活动生成 Span items.I 无法显示非活动消息。

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

Answer 1

试试这个：

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

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

Answer 2

主要问题出在你的fiddle，你没有包括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"});
    });
});

Fiddle: https://jsfiddle.net/dineshpatra28/r71nsk2t/4/

Answer 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

Answer 4

Use :contains which will return elements which contains the mentioned text.

试试这个：

  $("#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

Answer 5

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

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

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

Fiddle

Answer 6

这样试试：

<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();
})
});

检查笔link:http://codepen.io/anon/pen/gPEPeM

如何显示隐藏的div onchange of dropdown

How to show hidden div onchange of dropdown

html

javascript

jquery

onchange

drop-down-menu