if-else-Anweisung bei Änderung einer Auswahlbox

Question

Ich versuche, es zu bekommen, um die Variable "Wahl" zu wählen, um zu entscheiden, welches Element im Dropdown ausgewählt wird. Das Problem ist, wenn ich auf "Slogan" klicke und dann zurück zu "Header" gehe, fängt es an, in beide Textfelder zu schreiben.

HTML

<select class="choice"> 
    <option value="h">Header</option> 
    <option value="s">Slogan</option> 
</select> 
<input class="selecttext" type="text" placeholder="Main Text"></input> 

JavaScript

$(".fontsdiv .choice").on("change", function() { 
    var choice = $(".choice").val(); 
    if (choice === "h") { 
     $(".selecttext").keyup(function(event) { 
      var titlechange = $(".selecttext").val(); 
      $(".maintitle").html("<h1 class='maintitle'>" + titlechange + "</h1>"); 
      $(".maintitle").draggable(); 

     }); 
    } else if (choice === "s") { 
     $(".selecttext").keyup(function(event) { 
      var titlechanges = $(".selecttext").val(); 
      $(".secondtitle").html("<h1 class='secondtitle'>" + titlechanges + "</h1>"); 
      $(".secondtitle").draggable(); 

     }); 
    } 
}); 

Answer 1

Da Sie Ereignishandler in der change Ereignis ein neue Ereignishandler input Element befestigt ist, jedes Mal, verbindlich ändern Sie die Wert, in Kürze mehrere Ereignishandler werden angefügt.

Sie müssen den Wert im keyup Ereignis von input Element überprüfen.

$(".selecttext").keyup(function(event) { 
 
    var choice = $(".choice").val(); 
 
    var titlechange = $(".selecttext").val(); 
 

 
    if (choice === "h") { 
 
    $(".maintitle").html("<h1 class='maintitle'>" + titlechange + "</h1>"); 
 
    //$(".maintitle").draggable(); 
 
    } else if (choice === "s") { 
 
    $(".secondtitle").html("<h1 class='secondtitle'>" + titlechanges + "</h1>"); 
 
    //$(".secondtitle").draggable(); 
 
    } 
 

 
}); 
 
$(".choice").on("change", function() { 
 
    //Clear value 
 
    $(".selecttext").val(''); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="choice"> 
 
    <option value="h">Header</option> 
 
    <option value="s">Slogan</option> 
 
</select> 
 
<input class="selecttext" type="text" placeholder="Main Text" /> 
 
<br/> 
 
<div class='maintitle'></div> 
 
<div class='secondtitle'></div>