Question

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

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

仅针对非活动项目生成Spans。我无法显示非活动消息。

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

主要问题在于你的小提琴，我没有包括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/

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

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

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Fiddle here

Answer 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

Answer 6

首先将jquery库添加到你的小提琴中。

您不必遍历select选项，jquery提供了解决此问题的方法。

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

Fiddle

如何在下拉列表中显示隐藏的div

6 个答案: