Dynamic value for jQuery selector $(dynamiValueHere).show();

debugcn Published at Dev

Andrea php

I guys, I have a little problem with my jquery script. I have more div and i want display it based on the value of my <select>.

This is my code:

<select name="stackoverflow" id="stackoverflow">
  <option value="123">123 Value</option>
  <option value="124">124 Value</option>
  <option value="125">125 Value</option>
</select>

<div id="number123" class="hidenumber" style="display: none;">123</div>
<div id="number124" class="hidenumber" style="display: none;">124</div>
<div id="number125" class="hidenumber" style="display: none;">125</div>


<script type='text/javascript'>
  $(window).load(function(){
  $('#stackoverflow').on('change', function() {
    $('.hidenumber').hide();

    $('#number'.this.value).show();
  })
});
</script>

The problem is here: $('#number'.this.value).show(); How I can write: '#number'.this.value ???

Satpal

You need to use + for string concatenation

$('#number'+ this.value).show();

$('#stackoverflow').on('change', function() {
  $('.hidenumber').hide();

  $('#number' + this.value).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="stackoverflow" id="stackoverflow">
  <option value="123">123 Value</option>
  <option value="124">124 Value</option>
  <option value="125">125 Value</option>
</select>

<div id="number123" class="hidenumber" style="display: none;">123</div>
<div id="number124" class="hidenumber" style="display: none;">124</div>
<div id="number125" class="hidenumber" style="display: none;">125</div>

Collected from the Internet

Please contact [email protected] to delete if infringement.