jQuery selectbox al TextBox

Question

Prima di cambiare paese

Dopo aver cambiato paese

Come avete visto sulle immagini voglio sostituire selectbox con casella di testo per città e la città dipende cambiando paese. (Ho bisogno di selectbox solo nel mio paese.Per altri paesi ho bisogno di casella di testo.)

Se il cliente cambia paese sto sostituendo selectbox in textbox. Va bene. Ma se il cliente vuole sostenere la selezione del vecchio paese ho bisogno di ricaricare città e città come selectbox. Ma non funziona

Cosa devo fare?

Ecco il file jquery.

<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: Ho quasi finito. (Ho usato il metodo di @Rhumborl.)

Ma c'è un problema. La città dipende dalla selezione della città. Normalmente quando cambi città, sto caricando nuove città. Ma in questo numero. Non funziona.

In questo codice di evento non riesce.

1. Ho cambiato paese.
2. Ho girato indietro la Turchia.
3. Ho cambiato città ad Ankara, nuove città stanno caricando da Ankara.
4. Quando ho cambiato qualsiasi altro paese e torno in Turchia. Posso vedere la città come Ankara. Ma le città non sono di Ankara. Le città provengono dalla città di origine Nevşehir.

Ecco screenshot

Questo è il conflitto.

Answer 1

È possibile aggiungere l'elemento che si desidera sostituire all'interno di un contenitore (un div o un arco) quindi sostituire l'intero contenuto del contenitore con l'elemento necessario a seconda delle vostre esigenze

Answer 2

provare questo: -

$(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); 
      } 
     }); 
    }); 

rimuovere .html() come quello che ottiene il contenuto all'interno dell'elemento e rimuovere i parametri city e town nella funzione.

EDIT

Se si dispone di gestori di eventi collegati al city e town seleziona, cablare i vostri eventi in questo modo: -

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

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

in questo modo gli eventi sulle seleziona si erano originariamente perdere sarà ancora lavora come hai bisognoselect#city sceglierà solo il campo di selezione e non quello di testo.

Fiddle

EDIT PER CITTA 'CAMBIA

Per risolvere questo, resettata le variabili della città e la città a città change.

vale a dire: -

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

    //YOUR CODE FOR SETTING THE TOWNS HERE 

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

Vedere questo Fiddle

Answer 3

hai 2 problemi

1. html() solo la innerHTML di un elemento dà, cioè qualsiasi contenuto all'interno esso , non l'elemento stesso. In questo caso, riceverai solo il numero <option> s.

2. La funzione di modifica sta prendendo in 2 parametri chiamati city e town che sostituiscono i riferimenti alle variabili create in alto. Poiché a questa funzione verrà assegnato l'oggetto evento jQuery, si sostituiranno le caselle di testo con le cose sbagliate.

Per fissare il problema 1, si può semplicemente rimuovere la parte .html(), e solo memorizzare city e town come oggetti jQuery che contengono gli elementi originali.

Per risolvere il problema 2, rimuovere i parametri city e town dalla funzione.

Quindi il codice può assomigliare a questo:

$(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

Se si desidera mantenere i gestori di eventi, ecc allegati al town e city seleziona, non è possibile utilizzare replaceWith() in quanto rimuove tutti i gestori di eventi. Come dice la documentazione:

Il metodo .replaceWith() rimuove tutti i dati e gestori di eventi associati ai nodi rimossi.

è necessario invece una combinazione di detach() per rimuovere gli elementi ma preservare gestori di eventi e after() aggiungere ingressi/seleziona al DOM dopo gli elementi attivi correnti:

$(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

È possibile utilizzare modelli html:

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

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

Con jQuery, caricare il contenuto del modello corrispondente a seconda del paese selezionato.

Se non si desidera salvare e visualizzare nuovamente i valori selezionati, è possibile salvare la casella di testo corrente o selectbox html nel modello corrispondente.

Answer 5

Hai quasi ragione. Devi solo sostituire queste tre righe di codice.

Codice (Prima sostituire):

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

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

Sostituire con questo (Dopo la sostituzione):

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

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

Answer 6

Si prega di trovare il mio soluzione proposta di seguito. Supponendo che i nomi di città siano codificati, non dalla risposta AJAX, ho aggiunto una serie di valori di città & nomi corrispondenti alla città.

È anche possibile controllare lo stesso snippet su jsfiddle.

$(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

Un'altra soluzione proposta. Questo è l'elenco del nome della città acquisito da AJAX.

L'elenco restituito del nome della città viene preso in giro (hardcoded) per simulare la condizione reale. Dovresti cambiare il codice sotto lo // FIXME: list of town should be acquired from server.. Modificare la variabile townList con l'elenco di città acquisite dal server.

Checkout mia risposta su jsfiddle

PS: io non includo il codice qui perché richiesta AJAX/risposta non può essere imitato qui.