Combo <Select> does not work

Question

I need the second <select> receive the data according to the choice of the first. The <option> in the first <select>, but in the second it doesn’t move.

I have a folder textdata with all .txt concerning the <option> of each correspondence.

HTML

<select id="first-choice">
  <option selected value="0">>>> Selecione</option>
  <option value="AC">AC</option>
  <option value="AL">AL</option>
  <option value="AM">AM</option>
  <option value="AP">AP</option>
  <option value="BA">BA</option>
  <option value="CE">CE</option>
  <option value="DF">DF</option>
  <option value="ES">ES</option>
  <option value="GO">GO</option>
  <option value="MA">MA</option>
  <option value="MG">MG</option>
  <option value="MS">MS</option>
  <option value="MT">MT</option>
  <option value="PA">PA</option>
  <option value="PB">PB</option>
  <option value="PE">PE</option>
  <option value="PI">PI</option>
  <option value="PR">PR</option>
  <option value="RJ">RJ</option>
  <option value="RN">RN</option>
  <option value="RO">RO</option>
  <option value="RR">RR</option>
  <option value="RS">RS</option>
  <option value="SC">SC</option>
  <option value="SE">SE</option>
  <option value="SP">SP</option>
  <option value="TO">TO</option>
  <option value="WW">WW</option>
</select>
<br>
<select id="second-choice">
  <option>Selecionar UF</option>
</select>

JAVASCRIPT

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/JavaScript">
$("#first-choice").change(function() {
   $("#second-choice").load("textdata/" + $(this).val() + ".txt");
});
</script>

A part of one of the archives .txt

<option>São Paulo - SP001</option>
<option>Adamantina - SP002</option>
<option>Adolfo - SP003</option>
<option>Aguaí - SP004</option>
<option>Águas da Prata - SP005</option>

Answer 1

Hello, at first your code is correct. What can be happening is that your files . txt are not inside an HTTP server and so jQuery does not load them. Install the extension Web Server in Chrome and configures it to serve the files in your folders. My folder structure looks like this:

C:\stackoverflow\exemplo01
C:\stackoverflow\exemplo01\index.html
C:\stackoverflow\exemplo01\textdata\AC.txt

I configured the Web Server to serve the *C: stackoverflow folder files*.

Hence, only you access in the browser your folder using the Web Server URL:

http://127.0.0.1:8887/exemplo01/

Your code is correct: