CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menuonchange
Raviteja
Raviteja

Reputation: 3489

How to show hidden div onchange of dropdown

I have a dropdown list where there are some inactive values.When I change a value in the dropdown I need find the id inside divInactive class and display the particular inactive item.User should given the message(present in divInactive) if he selects the inactive one.

The span values inside the divInactive is generated using foreach loop from model.

Spans are generated only for the inactive items.I am unable to show the inactive message.

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

Upvotes: 0

Views: 3086

Answers (6)

Sumanta736
Sumanta736

Reputation: 705

Try like this:

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

check pen link: http://codepen.io/anon/pen/gPEPeM

Upvotes: 1

Sharath Bangera
Sharath Bangera

Reputation: 114

First of all add jquery library to your Fiddle.

You don't have to loop through the select option, jquery provides a way to solve this.

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

Fiddle

Upvotes: 0

Rayon
Rayon

Reputation: 36599

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

Try this:

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

Upvotes: 1

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

Use in this way.

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

Upvotes: 1

Dinesh Patra
Dinesh Patra

Reputation: 1135

The main problem was in your fiddle, I you have not included jquery.

I have included the jquery and edited the codes: Please check,

$(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/

Upvotes: 1

K K
K K

Reputation: 18099

Try this:

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

Demo: https://jsfiddle.net/r71nsk2t/3/

Upvotes: 1

Related Questions