jQuery到Javascript

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>

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>

Be sure to load the library before your script, just above the closing body tag. Also, you might try using $(this).val() instead of this.value. I've done a quick jQuery script in case it works correctly on your browser, and using switch statement rather tan if statement.

JSFiddle: https://jsfiddle.net/noLz7wr3/

$(document).ready(function() {
    $('#DeliveryPlaces').on('change', function(e) {
    e.preventDefault();
    $('.delivery').hide();
    switch($(this).val()){
        case "1":
        $('#LocationDelivery1').show();
      break;
        case "2":
        $('#LocationDelivery2').show();
      break;
        case "3":
        $('#LocationDelivery3').show();
      break;
        case "4":
        $('#LocationDelivery4').show();
      break;
        case "5":
        $('#LocationDelivery5').show();
      break;
    }
  })
});

.delivery {
  padding-top: 20px;
  display: none;
}

<form>
  <select id="DeliveryPlaces">
    <option value selected disabled>Select Location Delivery</option>
    <option value="1">Location Delivery 1</option>
    <option value="2">Location Delivery 2</option>
    <option value="3">Location Delivery 3</option>
    <option value="4">Location Delivery 4</option>
    <option value="5">Location Delivery 5</option>
    
  </select>
</form>

    <div class="delivery" id="LocationDelivery1">Location Delivery 1</div>
    <div class="delivery" id="LocationDelivery2">Location Delivery 2</div>
    <div class="delivery" id="LocationDelivery3">Location Delivery 3</div>
    <div class="delivery" id="LocationDelivery4">Location Delivery 4</div>
    <div class="delivery" id="LocationDelivery5">Location Delivery 5</div>

</div>

As chosen in the comments by the OP:

Are you running this from localhost on Chrome? Try using Firefox or start a web server (like WAMP, XAMPP, LAMP or any of your choice). Chrome blocks localhost javascript so the problem might be as stupid as this. If not, let me know :)