Use the select tag to change the content of the page?

Question

I’m starting to use Javascript and would like to know how I can use the select so that according to the language chosen, the page show me a different return (its characteristics).

$(document).ready(function() {

  var ling = ["Java", "JavaScript", "PHP", "Python", "Ruby", "c++"];

  var urlStr = "https://api.github.com/search/repositories?q=language:" + ling[5];

  var contr = 0;

  $.ajax({
    url: urlStr,
    type: "get",
    dataType: "json",
    success: function(data) {
      console.log(data);

      for (; contr < 10; contr++) {

        //console.log(contr);
        $("#nomeProj" + contr).text((contr + 1) + " - " + data.items[contr].name);
        $("#descr" + contr).text("Descriçao: " + data.items[contr].description);
        $("#nEstrlas" + contr).text("Nº Estrelas: " + data.items[contr].stargazers_count);
        $("#nCommits" + contr).text("Nº Commits: " + data.items[contr].forks);
        $("#url" + contr).text("URL: " + data.items[contr].html_url);

      };

    },
    error: function(erro) {
      console.log(erro);
    }

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript" src="js/script.js"></script>

<p>Informe a linguagem:</p>
<select id="lings" onchange="mudarLing()">
  <option value="Java">Java</option>
  <option value="JavaScript">JavaScript</option>
  <option value="PHP">PHP</option>
  <option value="Python">Python</option>
  <option value="Ruby">Ruby</option>
  <option value="C++">C++</option>
</select>

<div id="principal">

  <div class="card">
    <h1 id="nomeProj0">1 - </h1>
    <h2 id="descr0">Descrição: </h2>
    <h2 id="nEstrlas0">Nº Estrelas: </h2>
    <h2 id="nCommits0">Nº Commits: </h2>
    <h2 id="url0">URL: </h2>
  </div>

  <div class="card">
    <h1 id="nomeProj1">2 - </h1>
    <h2 id="descr1">Descrição: </h2>
    <h2 id="nEstrlas1">Nº Estrelas: </h2>
    <h2 id="nCommits1">Nº Commits: </h2>
    <h2 id="url1">URL: </h2>
  </div>

  <div class="card">
    <h1 id="nomeProj2">3 - </h1>
    <h2 id="descr2">Descrição: </h2>
    <h2 id="nEstrlas2">Nº Estrelas: </h2>
    <h2 id="nCommits2">Nº Commits: </h2>
    <h2 id="url2">URL: </h2>
  </div>

  <div class="card">
    <h1 id="nomeProj3">4 - </h1>
    <h2 id="descr3">Descrição: </h2>
    <h2 id="nEstrlas3">Nº Estrelas: </h2>
    <h2 id="nCommits3">Nº Commits: </h2>
    <h2 id="url3">URL: </h2>
  </div>

  <div class="card">
    <h1 id="nomeProj4">5 - </h1>
    <h2 id="descr4">Descrição: </h2>
    <h2 id="nEstrlas4">Nº Estrelas: </h2>
    <h2 id="nCommits4">Nº Commits: </h2>
    <h2 id="url4">URL: </h2>
  </div>

  <div class="card">
    <h1 id="nomeProj5">6 - </h1>
    <h2 id="descr5">Descrição: </h2>
    <h2 id="nEstrlas5">Nº Estrelas: </h2>
    <h2 id="nCommits5">Nº Commits: </h2>
    <h2 id="url5">URL: </h2>
  </div>

  <div class="card">
    <h1 id="nomeProj6">7 - </h1>
    <h2 id="descr6">Descrição: </h2>
    <h2 id="nEstrlas6">Nº Estrelas: </h2>
    <h2 id="nCommits6">Nº Commits: </h2>
    <h2 id="url6">URL: </h2>
  </div>

  <div class="card">
    <h1 id="nomeProj7">8 - </h1>
    <h2 id="descr7">Descrição: </h2>
    <h2 id="nEstrlas7">Nº Estrelas: </h2>
    <h2 id="nCommits7">Nº Commits: </h2>
    <h2 id="url7">URL: </h2>
  </div>

  <div class="card">
    <h1 id="nomeProj8">9 - </h1>
    <h2 id="descr8">Descrição: </h2>
    <h2 id="nEstrlas8">Nº Estrelas: </h2>
    <h2 id="nCommits8">Nº Commits: </h2>
    <h2 id="url8">URL: </h2>
  </div>

  <div class="card">
    <h1 id="nomeProj9">10 - </h1>
    <h2 id="descr9">Descrição: </h2>
    <h2 id="nEstrlas9">Nº Estrelas: </h2>
    <h2 id="nCommits9">Nº Commits: </h2>
    <h2 id="url9">URL: </h2>
  </div>

</div>

Answer 1

You can use the event change jquery:

$('#lings').change(function(){
 //Aqui você faz o que for necessário para mudar a língua
});

But I also realized that in your select you have a onchange for the function mudarLing(), but that function is not declared anywhere in your javascript.