jQuery Auswahlbox TEXTBOX

Question

Vor Land Ändern

Nach dem Wechsel Land

Wie man auf den Bildern sah ich selectbox mit Textbox ersetzen möchten für Stadt und Stadt hängt davon ab, wechselndes Land. (Ich benötige selectbox nur in meinem Land. Für andere Länder benötige ich textbox.)

Wenn der Klient Land ändert, ersetze ich selectbox zum textbox. Es ist okay. Aber wenn der Klient die alte Länderauswahl unterstützen möchte, muss ich Stadt und Stadt als Auswahlbox neu laden. Aber es funktioniert nicht

Was soll ich tun?

Hier ist meine JQuery-Datei.

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var city = $('#city').html(); 
     var town = $('#town').html(); 

     $('#country').change(function(city, town){ 
      var country = $(this).val(); 
      if(country != 'Türkiye') 
      { 
       $('#city').replaceWith('<input class="form-control" type="text" name="city" id="city">'); 
       $('#town').replaceWith('<input class="form-control" type="text" name="town" id="town">'); 
      } 
      else 
      { 
       $('#city').replaceWith(city); 
       $('#town').replaceWith(town); 
      } 
     }); 
    }); 
</script> 

UPDATE: Ich bin fast fertig. (Ich benutzte @Rhumborls Methode.)

Aber es gibt ein Problem. Die Stadt hängt von der Stadtauswahl ab. Normalerweise, wenn sich die Stadt ändert, lade ich neue Städte. Aber in dieser Ausgabe. Es funktioniert nicht.

In diesem Ereignis schlägt der Code fehl.

1. Ich habe das Land gewechselt.
2. Ich kehrte die Türkei zurück.
3. Ich änderte die Stadt nach Ankara, neue Städte werden von Ankara geladen.
4. Als ich ein anderes Land änderte und in die Türkei zurückkehrte. Ich kann Stadt als Ankara sehen. Aber Städte sind nicht Ankaras. Die Städte stammen aus der Stadt Nevşehir.

Hier Screenshot

Dies ist Konflikt.

Answer 1

Sie können das Element hinzufügen, die Sie in einem Container (ein div oder eine Spanne) ersetzt werden sollen dann mit dem benötigten Elemente den gesamten Behälterinhalt ersetzen je nach Ihren Anforderungen

Answer 2

try this: -

$(document).ready(function(){ 
     var city = $('#city'); 
     var town = $('#town'); 

     $('#country').change(function(){ 

      var country = $(this).val(); 
      if(country != 'Türkiye') 
      { 
       $('#city').replaceWith('<input class="form-control" type="text" name="city" id="city">'); 
       $('#town').replaceWith('<input class="form-control" type="text" name="town" id="town">'); 
      } 
      else 
      { 
       $('#city').replaceWith(city); 
       $('#town').replaceWith(town); 
      } 
     }); 
    }); 

Entfernen Sie .html() als das erhält den Inhalt innerhalb des Elements und entfernen Sie die city und town Parameter in der Funktion.

EDIT

Wenn Sie Event-Handler an city und town wählt haben, Ihre Veranstaltungen Draht in etwa so: -

$(document).on('change', 'select#city', function(){ 

$(document).on('change', 'select#town', function(){ 

auf diese Weise die Ereignisse auf den wählt man ursprünglich verloren wird noch arbeite wie du brauchst.select#city zielt nur auf das Select- und nicht auf das Textfeld.

Fiddle

EDIT FÜR CITY CHANGE

Um dies zu beheben, setzen Sie einfach die Stadt und die Stadt Variablen auf Stadt change.

dh: -

$(document).on('change', '#city', function(){ 

    //YOUR CODE FOR SETTING THE TOWNS HERE 

    // RE-SET CITY AND TOWN 
    city = $('#city'); 
    town = $('#town'); 
}); 

Sehen Sie diese Fiddle

Answer 3

Sie haben 2 Ausgaben

1. html() gibt Ihnen nur die innerHTML eines Elements, ist, dass jeder Inhalt innerhalb es , nicht das Element selbst. In diesem Fall erhalten Sie nur die <option> s.

2. Ihre Änderungsfunktion nimmt 2 Parameter auf, die city und town genannt werden, die die Verweise auf die Variablen überschreiben, die Sie oben erstellen. Da diese Funktion das jQuery-Ereignisobjekt erhält, ersetzen Sie die Textfelder durch die falschen Dinge.

beheben Problem 1 Sie einfach den .html() Teil entfernen kann, und speichern nur city und town als jQuery Objekte die ursprünglichen Elemente enthält.

Um das Problem 2 zu beheben, entfernen Sie einfach die Parameter city und town aus Ihrer Funktion.

So Ihr Code kann wie folgt aussehen:

$(document).ready(function(){ 
 
    var city = $('#city'); 
 
    var town = $('#town'); 
 

 
    $('#country').change(function(){ 
 
     var country = $(this).val(); 
 
     if(country != 'Türkiye') 
 
     { 
 
      $('#city').replaceWith('<input class="form-control" type="text" name="city" id="city">'); 
 
      $('#town').replaceWith('<input class="form-control" type="text" name="town" id="town">'); 
 
     } 
 
     else 
 
     { 
 
      $('#city').replaceWith(city); 
 
      $('#town').replaceWith(town); 
 
     } 
 
    }); 
 
});

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

 
<select id="country"> 
 
    <option value="Türkiye">Turkey</option> 
 
    <option value="UK">United Kingdom</option> 
 
    <option value="USA">USA</option> 
 
</select> 
 

 
<select id="city"> 
 
    <option value="Izmir">Izmir</option> 
 
    <option value="Ankhara">Ankha`enter code here`ra</option> 
 
</select> 
 

 
<select id="town"> 
 
    <option value="Merkez">Merkez</option> 
 
</select>

UPDATE

Wenn Sie Event-Handler usw. an town und city wählt behalten möchten, können Sie nicht verwenden replaceWith(), da dies alle Event-Handler entfernt. Da die Dokumentation sagt:

Die .replaceWith() -Methode werden alle Daten und Event-Handler mit den entfernten Knoten verbunden sind.

Stattdessen Sie eine Kombination aus detach() brauchen, um die Elemente zu entfernen, aber Event-Handler und after() hinzufügen, um die Ein-/wählt auf das DOM nach den derzeit aktiven Elemente erhalten:

$(document).ready(function(){ 
 
    var city = $('#city'); 
 
    var town = $('#town'); 
 
    
 
    town.change(function() { 
 
     $('#townResult').text($(this).val()); 
 
    }); 
 
    
 
    city.change(function() { 
 
     $('#cityResult').text($(this).val()); 
 
    }); 
 

 
    $('#country').change(function(){ 
 
     var country = $(this).val(); 
 
     if(country != 'Türkiye') 
 
     { 
 
      // add the textboxes after the dropdowns, then detach the dropdowns 
 
      $('#city').after('<input class="form-control" type="text" name="city" id="city">').detach(); 
 
      $('#town').after('<input class="form-control" type="text" name="town" id="town">').detach(); 
 
     } 
 
     else 
 
     { 
 
      // add the dropdowns after the textboxes, then remove the textboxes 
 
      $('#city').after(city).remove(); 
 
      $('#town').after(town).remove(); 
 
     } 
 
    }); 
 
});

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

 
<select id="country"> 
 
    <option value="Türkiye">Turkey</option> 
 
    <option value="UK">United Kingdom</option> 
 
    <option value="USA">USA</option> 
 
</select> 
 

 
<select id="city"> 
 
    <option value="Izmir">Izmir</option> 
 
    <option value="Ankhara">Ankhara</option> 
 
</select> 
 

 
<select id="town"> 
 
    <option value="Merkez">Merkez</option> 
 
    <option value="A Town">A Town</option> 
 
</select> 
 

 
<div id="cityResult"></div> 
 
<div id="townResult"></div>

Answer 4

Sie können HTML-Vorlagen verwenden:

<script type="text/html" id="textbox-template"><!-- Your textbox here --></script> 

<script type="text/html" id="selectbox-template"><!-- Your selectbox here --></script> 

Mit jQuery laden Sie den Inhalt der entsprechenden Vorlage abhängig vom ausgewählten Land.

Wenn Sie ausgewählte Werte speichern und erneut anzeigen möchten, können Sie die aktuelle Textbox oder selectbox html in der entsprechenden Vorlage speichern.

Answer 5

Sie sind fast richtig. Sie müssen nur diese drei Codezeilen ersetzen.

-Code (vor dem Ersetzen):

var city = $('#city').html(); 
     var town = $('#town').html(); 

     $('#country').change(function(city, town){ 

mit diesem ersetzen (Nach Ersetzen):

var city = $('#city'); 
     var town = $('#town'); 

     $('#country').change(function(){ 

Answer 6

Bitte meine vorgeschlagene Lösung unten. Unter der Annahme, dass Stadt Namen sind hart codiert, nicht von AJAX Antwort, ich habe Array von Stadt Werte hinzugefügt & Namen der Stadt entsprechen.

Sie können das gleiche Snippet auch auf jsfiddle überprüfen.

$(document).ready(function() { 
 
    var city = $('#city'); 
 
    var town = $('#town'); 
 
    $('#country').change(function() { 
 
    var country = $(this).val(); 
 
    if (country != 'Türkiye') { 
 
     $('#city').replaceWith('<input class="form-control" type="text" name="city" id="city">'); 
 
     $('#town').replaceWith('<input class="form-control" type="text" name="town" id="town">'); 
 
    } else { 
 
     $('#city').replaceWith(city); 
 
     $('#town').replaceWith(town); 
 
    } 
 
    }); 
 
    // Need to attach event handlers to newly inserted city & town options 
 
    $(document).on('change', '#city', function() { 
 
    var city = $(this).val(); 
 
    // Clear town options 
 
    $("#town").html(""); 
 
    // Then append town names based on selected city 
 
    for (var i = 0; i < towns[city].length; i++) { 
 
     $("#town").append("<option value='" + towns[city][i].val + "' >" + towns[city][i].label + "</option>"); 
 
    } 
 
    }); 
 
    // Town names. Assuming town names are hard coded, correspond to city name. 
 
    // Note: value of town names in HTML has been changed to number based value (0 & 1) 
 
    var towns = [ 
 
    [{ 
 
     val: "merkez", 
 
     label: "Merkez" 
 
    }, { 
 
     val: "izmirtowna", 
 
     label: "Izmir Town A" 
 
    }], 
 
    [{ 
 
     val: "ankharatowna", 
 
     label: "Ankhara Town A" 
 
    }, { 
 
     val: "ankharatownb", 
 
     label: "Ankhara Town B" 
 
    }] 
 
    ]; 
 
});

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

 
<!-- begin snippet: js hide: false --> 
 
<select id="country"> 
 
    <option value="Türkiye">Turkey</option> 
 
    <option value="UK">United Kingdom</option> 
 
    <option value="USA">USA</option> 
 
</select> 
 
<select id="city"> 
 
    <option value="0">Izmir</option> 
 
    <option value="1">Ankhara</option> 
 
</select> 
 
<select id="town"> 
 
    <option value="Merkez">Merkez</option> 
 
    <option value="izmirtowna">Izmir Town A</option> 
 
</select>

Answer 7

Eine weitere vorgeschlagene Lösung. Dies ist die Liste der Stadt Namen von AJAX erworben.

Die zurückgegebene Ortsnamenliste wird verspottet (hart codiert), um den tatsächlichen Zustand nachzuahmen. Sie sollten den Code unter // FIXME: list of town should be acquired from server. ändern. Ändern Sie die townList Variable mit der Liste der Stadt von Server erworben.

Kasse meine Antwort auf jsfiddle

PS: Ich bin auch nicht den Code hier, weil AJAX-Request/Response hier nicht nachgeahmt werden kann.