1. Zuhause
  2. Frage und Antwort
  3. Javascript wählen Option Anwendung

Javascript wählen Option Anwendung

2017-04-02 1 views
0

Ich versuche, die Select-Anwendung nur mit Javascipt zu erstellen. Ich habe diesen Code im Internet wissenJavascript wählen Option Anwendung

<!DOCTYPE html> 
<html> 
<head> 
    <title>Select Options</title> 
</head> 
<body> 

<h2>Choose your car</h2> 
<hr> 

Choose Car Make: 
<select id="slct1" onchange="populate(this.id,'slct2')"> 
    <option value=""></option> 
    <option value="Hyundai">Hyundai</option> 
    <option value="Honda">Honda</option> 
    <option value="Maruti">Maruti</option> 
</select> 

<hr> 

Choose Car Model 
<select id="slct2" ></select> 

</body> 

<script type="text/javascript"> 

    function populate(s1,s2){ 
     var s1,s2; 
     s1 = document.getElementById(s1); 
     s2 = document.getElementById(s2); 

     if(s1.value=='Hyundai'){ 
      optionArray=['Please Select Car','i10','i20','Verna'] 
     } else 
     if(s1.value=='Honda'){ 
      optionArray=['Please Select Car','Amaze','Jazz','City'] 
     } else 
     if(s1.value=='Maruti'){ 
      optionArray=['Please Select Car','Swift','Dezire','Ciaze'] 
     } 


     for (var i = 0; i < optionArray.length; i++) { 
     var store = optionArray[i]; 
     var createNewEl = document.createElement('option'); 
     createNewEl.innerHTML = store; 
     s2.appendChild(createNewEl); 
     } 

    }  

</script> 
</html>

Dies ist der vollständige Code, den ich jetzt dieses apllication schreiben benutzen, aber ich jedes Mal wenn ich wählen Sie die Option Automarke ** und wenn ich eine andere Option auswählen fromcar machen **, es nicht die vorherigen Optionen von Auto-Modell löschen und die Liste erhöht wird so auf jedes Mal wenn ich aus dem Auto wähle Option machen

Quelle

2017-04-02 Aseem Sharma

Antwort

2

Tanne st, müssen Sie jQuery importieren. Fügen Sie diese zwischen <head> tags:

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

Ihr Skript neue Werte Anhängen an Ende der Liste auswählen, so dass es alle alten Werte zu entfernen.

$("#slct2 option").remove();

Ich habe es getestet und funktioniert gut für mich. Hier ist voller, funktionierender Code.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Select Options</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 
<body> 

<h2>Choose your car</h2> 
<hr> 

Choose Car Make: 
<select id="slct1" onchange="populate(this.id,'slct2')"> 
    <option value=""></option> 
    <option value="Hyundai">Hyundai</option> 
    <option value="Honda">Honda</option> 
    <option value="Maruti">Maruti</option> 
</select> 

<hr> 

Choose Car Model 
<select id="slct2"></select> 

</body> 

<script type="text/javascript"> 

    function populate(s1,s2){ 

     var s1,s2; 
     s1 = document.getElementById(s1); 
     s2 = document.getElementById(s2);   

     $("#slct2 option").remove(); 

     if(s1.value=='Hyundai'){ 
      optionArray=['Please Select Car','i10','i20','Verna'] 
     } else 
     if(s1.value=='Honda'){ 
      optionArray=['Please Select Car','Amaze','Jazz','City'] 
     } else 
     if(s1.value=='Maruti'){ 
      optionArray=['Please Select Car','Swift','Dezire','Ciaze'] 
     } 

     for (var i = 0; i < optionArray.length; i++) { 
      var store = optionArray[i]; 
      var createNewEl = document.createElement('option'); 
      createNewEl.innerHTML = store; 
      s2.appendChild(createNewEl); 
     } 
    }  

</script> 
</html>

EDIT: Wenn Sie jQuery nicht verwenden möchten, ersetzen Sie einfach diesen $("#slct2 option").remove(); mit diesem:

while (s2.firstChild) { 
    s2.removeChild(s2.firstChild); 
}

Quelle

2017-04-02 13:38:44 szymon

+0

Danke Es hat funktioniert, aber gibt es noch weitere Methoden neben den anderen zwei, die Sie zur Verfügung gestellt haben, weil jetzt schreibe ich bin in meiner Initiale des Lernens Javascript und ich glaube, ich habe teilweise die while-Anweisung verstanden. Gibt es etwas, das wir mit einer Aussage wie ** if ** oder etwas anderem tun können? –

Verwandte Themen

 Verwandte Themen