jQuery到Javascript

Question

EDIT I FIGURED IT OUT. I just needed to add the jquery and in Joomla you do this by going to your template/index.php and adding this line by "//Add Javascript Frameworks" JHtml::_('jquery.framework');.

WORKING

I need some help converting this code to javascript.

Currently it's not working in my browser using jQuery. I load the AJAX library and everything but it's not working. I just added a dropdown and div's with the same ID's as the ones I'm using to make it easier.

If I preview the form which I created in the software I'm using it is working as intended with this jQuery code; however once I save the changes to the form and go to the live site it's not doing anything. (The software is RSForm Pro for Joomla.. Yes, I'm still new to this)

Any help is appreciated.

$(document).ready(function() {
  $('#DeliveryPlaces').on('change', function() {
    if (this.value == '1') {
      $("#LocationDelivery1").show();
      $("#LocationDelivery2").hide();
      $("#LocationDelivery3").hide();
      $("#LocationDelivery4").hide();
      $("#LocationDelivery5").hide();
    } else if (this.value == '2') {
      $("#LocationDelivery1").show();
      $("#LocationDelivery2").show();
      $("#LocationDelivery3").hide();
      $("#LocationDelivery4").hide();
      $("#LocationDelivery5").hide();
    } else if (this.value == '3') {
      $("#LocationDelivery1").show();
      $("#LocationDelivery2").show();
      $("#LocationDelivery3").show();
      $("#LocationDelivery4").hide();
      $("#LocationDelivery5").hide();
    } else if (this.value == '4') {
      $("#LocationDelivery1").show();
      $("#LocationDelivery2").show();
      $("#LocationDelivery3").show();
      $("#LocationDelivery4").show();
      $("#LocationDelivery5").hide();
    } else if (this.value == '5') {
      $("#LocationDelivery1").show();
      $("#LocationDelivery2").show();
      $("#LocationDelivery3").show();
      $("#LocationDelivery4").show();
      $("#LocationDelivery5").show();
    } else {
      $("#LocationDelivery1").hide();
      $("#LocationDelivery2").hide();
      $("#LocationDelivery3").hide();
      $("#LocationDelivery4").hide();
      $("#LocationDelivery5").hide();
    }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="DeliveryPlaces">
  <option value="-">-</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<div id="LocationDelivery1">LocationDelivery1</div>
<div id="LocationDelivery2">LocationDelivery2</div>
<div id="LocationDelivery3">LocationDelivery3</div>
<div id="LocationDelivery4">LocationDelivery4</div>
<div id="LocationDelivery5">LocationDelivery5</div>

</div>

Answer 1

Here's some solution for you, but if you don't wish to use it this way, you can extract parts of code, i've done it right for 5 options, and 5 divs, and the script will loop on the value you selected and show them, all others will loop and hide.

document.getElementById("DeliveryPlaces").onchange = function() {
  var value = parseInt(this.value == '-' ? 0 : this.value);
  // show
  if (value>0) {
      for (var i=1; i<=value; i++) {
           document.getElementById("LocationDelivery"+i).style.display = 'block';
           }
     }
  // hide
  if (value<=4) {
      for (var i=value+1; i<=5; i++) {
           document.getElementById("LocationDelivery"+i).style.display = 'none';
          }
     }
};

<select id="DeliveryPlaces">
  <option value="-">-</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<div id="LocationDelivery1">LocationDelivery1</div>
<div id="LocationDelivery2">LocationDelivery2</div>
<div id="LocationDelivery3">LocationDelivery3</div>
<div id="LocationDelivery4">LocationDelivery4</div>
<div id="LocationDelivery5">LocationDelivery5</div>

</div>