Ändern Sie das Etikett, wenn Sie auf die Dropdown-Liste in jquery javascript klicken

Question

Wie kann ich mehrere Funktionen unter dem jquery javascript implementieren? Der "Get Projects" Knopf funktioniert gut, wenn ich die zweite Funktion entferne (Es funktioniert tatsächlich in meinem Eclipse Projekt, aus irgendeinem Grund funktioniert es nicht, wenn ich die zweite Funktion hier entferne).

Es gibt zwei Dinge, die ich hier erreichen möchte: 1) Klicken Sie auf "Get Projects", um die Projekte in die Dropdown-Liste hinzuzufügen. 2) Wenn Sie ein anderes Projekt als die Liste auswählen, ändert die Beschriftung den Text basierend auf der Auswahl.

$(document).ready(function() { 
 
     $('#projectbutton').click(function() { 
 
     var selector = document.getElementById('projectselector'); 
 
     var api = "http://localhost:8080/restapi/test/projects"; 
 
     $.getJSON(api, {"1":"project 1", "2":"project 2"},function (data) { 
 
      $.each(data, function (index, d) { 
 
       selector.options[selector.options.length] = new Option(d,d); 
 
      }); 
 
     }); 
 
     }); 
 
}); 
 
$(document).ready(function() { 
 
    $('#projectselector').change(function() { 
 
     var text = $('option:selected',this).text(); 
 
     $('#selectedprojectname').text(text); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="firstsection"> 
 
    <h1>List project</h1> 
 
    <button id="projectbutton" name="projectbutton">Get Projects</button> 
 
</div> 
 
<div id="secondsection"> 
 
    <h2>All available projects:</h2> 
 
    Projects: <select id="projectselector" name="projectselector"></select> 
 
</div> 
 
<div id="thirdsection"> 
 
    <h3>Selected project:</h3> 
 
    <label id=selectedprojectname name="selectedprojectname">empty</label> 
 
</div>

Answer 1

Ich bin nicht sicher, was Sie versuchen in der getJSON Anruf zu tun. Der zweite Parameter sind nur Daten, die an den API-Aufruf gesendet werden, sodass Sie wahrscheinlich nicht benötigen, was Sie übergeben.

In jedem Fall stimmt etwas mit dem API-Aufruf nicht. Wenn Sie den API-Teil entfernen, funktioniert es.

http://jsfiddle.net/CnEUh/3137/

$(document).ready(function() { 
    $('#projectbutton').click(function() { 
    var selector = document.getElementById('projectselector'); 
    var api = "http://localhost:8080/restapi/test/projects"; 
    var data = {"1":"project 1", "2":"project 2"}; 
     $.each(data, function (index, d) { 
     selector.options[selector.options.length] = new Option(d,d); 
     }); 
    }); 

    $('#projectselector').change(function() { 
    var text = $('option:selected',this).text(); 
    $('#selectedprojectname').text(text); 
    }); 
}); 

Ihre jQuery sieht gut aus, aber ich kann nicht mehr mit dem API-Aufruf helfen, wenn Sie den API-Code schreiben.